The website uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more.

Shortcodes

Shortcodes

Headers

Responsive Big Header H1

Responsive Big Header H2

Responsive Big Header H3


<h1 class="responsive-text nmt text-center text-success text-shadow">Responsive Big Header H1</h1>

Underlined 01 - H1

Underlined 01 - H2

Underlined 01 - H3

Underlined 01 - H4

Underlined 01 - H1

Underlined 01 - H2

Underlined 01 - H3

Underlined 01 - H4


{include file="custom/subheader.tpl" title="Underlined 01 - H1" style="01" heading="h1" center=""}

Boxed 02 - H1

Boxed 02 - H2

Boxed 02 - H3

Boxed 02 - H4

Boxed 03 - H1

Boxed 03 - H2

Boxed 03 - H3

Boxed 03 - H4


{include file="custom/subheader.tpl" title="Boxed 02 - H1" style="02" heading="h1"}

Icon 04 - H1

Icon 04 - H2

Icon 04 - H3

Icon 04 - H4

Icon 05 - H1

Icon 05 - H2

Icon 05 - H3

Icon 05 - H4

{include file="custom/subheader.tpl" title="Icon 04 - H1" style="04" heading="h1" icon="fa fa-leaf" colour="success"}

Dialogs

Title H1

Content

Title H2

Content

Title H3

Content
{include file="customer/dialog.tpl" title="Title H1" content=$smarty.capture.dialog panel="default" icon="fa fa-cog" heading="h1"}

Menus

Content
Content
Content
{include file="customer/menu_dialog.tpl" title="Title H1" content=$smarty.capture.menu panel="default" icon="fa fa-cog" heading="h1"}

Alerts

This is a dismissable Alert
This is a permanent Alert

This is a custom Alert

{capture name=alert}
This is a dismissable Alert
{/capture}
{include file="customer/alert.tpl" content=$smarty.capture.alert dismissable="true" icon="" heading="" class="" center=""}
This is a dismissable Warning
This is a permanent Warning

This is a custom Warning

{capture name=warning}
This is a dismissable Warning
{/capture}
{include file="customer/warning.tpl" content=$smarty.capture.warning dismissable="true" icon="" heading="" class="" center=""}

Panels

This is a panel
This is a panel
This is a panel
{capture name=panel}
This is a panel
{/capture}
{include file="customer/panel.tpl" content=$smarty.capture.panel class="" center=""}

Toggle Anything

Panel 1 - Nullam id dolor id nibh ultricies.

Panel 2 - Duis mollis, est non commodo luctus.

Panel 3 - Maecenas sed diam eget risus varius bland..


<button class="btn btn-success btn-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">Toggle Panel 1</button>
<div class="collapse" id="collapseExample1">
<p class="bg-success panel-body" style="margin:4px 0 0 0;border-radius:4px;">Panel 1 - Nullam id dolor id nibh ultricies.</p>
</div>

Toggle Panel Groups

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.

Buttons

Circle Buttons

Icon Buttons

Muted Default Primary Success Info Warning Danger

Muted Default Primary Success Info Warning Danger

Bootstrap Dropdowns

Select Dropdowns

Checkboxes

Basic

Supports bootstrap brand colors:
.checkbox-primary, .checkbox-info etc.

Checkboxes without label text

Inline checkboxes



Circled

.checkbox-circle for roundness.

Disabled

Disabled state also supported.

Radios

Basic

Supports bootstrap brand colors:
.radio-primary, .radio-danger etc.

Radios without label text

Inline radios



Disabled

Disabled state also supported.

As Checkboxes

Radios can be made to look like checkboxes.

Material Design Switches

  • Bootstrap Switch Default
  • Bootstrap Switch Primary
  • Bootstrap Switch Success
  • Bootstrap Switch Info
  • Bootstrap Switch Warning
  • Bootstrap Switch Danger

Checkbox / Radio Switches

Checkbox Question?



Radio Question?



Input Field Limiters


Input Field Spinners

Horizontal Rules / Dividers





This is a Text Divider

This is a Text Divider

This is Another Text Divider

This is Another Text Divider

Match Heights of Content

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
<div data-mh="unique-id"> ... </div>
<div data-mh="unique-id"> ... </div>

Grid Column Dividers

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.


Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.


Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

Column 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.

5 Column Grid

Column 1

Column 2

Column 3

Column 4

Column 5

Truncate Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla.


<p class="truncate"> ... </p>

Scrollable Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu arcu, interdum vitae libero at, pharetra malesuada est. Mauris vitae tincidunt nulla.

<div class="scrollable-div" style="height:140px;"> ... </div>

Contextual Colours

class="text-primary" Nullam id dolor id nibh ultricies.

class="text-success" Duis mollis, est non commodo luctus.

class="text-info" Maecenas sed diam eget risus varius bland..

class="text-warning" Etiam porta sem malesuada magna.

class="text-danger" Donec ullamcorper nulla non metus.

class="text-muted" Fusce dapibus, tellus ac cursus commodo.

Contextual Backgrounds

class="bg-primary" Nullam id dolor id nibh ultricies.

class="bg-success" Duis mollis, est non commodo luctus.

class="bg-info" Maecenas sed diam eget risus varius bland..

class="bg-warning" Etiam porta sem malesuada magna.

class="bg-danger" Donec ullamcorper nulla non metus.

List Styles

Angles

  • List Item
  • List Item
  • List Item
  • List Item

Carets

  • List Item
  • List Item
  • List Item
  • List Item

Chevrons

  • List Item
  • List Item
  • List Item
  • List Item

Stars

  • List Item
  • List Item
  • List Item
  • List Item

Arrows

  • List Item
  • List Item
  • List Item
  • List Item

Hearts

  • List Item
  • List Item
  • List Item
  • List Item

Smiles

  • List Item
  • List Item
  • List Item
  • List Item

Warnings

  • List Item
  • List Item
  • List Item
  • List Item

Checks

  • List Item
  • List Item
  • List Item
  • List Item

Checks 2

  • List Item
  • List Item
  • List Item
  • List Item

Checks 3

  • List Item
  • List Item
  • List Item
  • List Item

Checks 4

  • List Item
  • List Item
  • List Item
  • List Item
  • Inline List Item 1
  • Inline List Item 2
  • Inline List Item 3
  • Inline List Item 4
  • Inline List Item 5
  • Inline List Item 1
  • Inline List Item 2
  • Inline List Item 3
  • Inline List Item 4
  • Inline List Item 5
  • Inline List Item 1
  • Inline List Item 2
  • Inline List Item 3
  • Inline List Item 4
  • Inline List Item 5

Auto-Sensing File Type Icons


<a class="link-icon" href="file.doc">DOC</a>

Bootstrap Modals

Lightboxes

Single Image

On The Fly With Javascript

Tooltips / Popovers

Tooltip Top Tooltip Right Tooltip Bottom Tooltip Left HTML Tooltip

Responsive, Lazy Loaded, Animated Images

<img class="img-responsive img-center wow flipInX" src="{$ImagesDir}/spacer.gif" data-src="https://unsplash.it/320/240?random" width="320" height="240" alt="">

Material Design Styles

  • md red P50
  • md red P100
  • md red P200
  • md red P300
  • md red P400
  • md red P500
  • md red P600
  • md red P700
  • md red P800
  • md red P900
  • md red A100
  • md red A200
  • md red A400
  • md red A700
  • md pink P50
  • md pink P100
  • md pink P200
  • md pink P300
  • md pink P400
  • md pink P500
  • md pink P600
  • md pink P700
  • md pink P800
  • md pink P900
  • md pink A100
  • md pink A200
  • md pink A400
  • md pink A700
  • md purple P50
  • md purple P100
  • md purple P200
  • md purple P300
  • md purple P400
  • md purple P500
  • md purple P600
  • md purple P700
  • md purple P800
  • md purple P900
  • md purple A100
  • md purple A200
  • md purple A400
  • md purple A700
  • md deeppurple P50
  • md deeppurple P100
  • md deeppurple P200
  • md deeppurple P300
  • md deeppurple P400
  • md deeppurple P500
  • md deeppurple P600
  • md deeppurple P700
  • md deeppurple P800
  • md deeppurple P900
  • md deeppurple A100
  • md deeppurple A200
  • md deeppurple A400
  • md deeppurple A700
  • md indigo P50
  • md indigo P100
  • md indigo P200
  • md indigo P300
  • md indigo P400
  • md indigo P500
  • md indigo P600
  • md indigo P700
  • md indigo P800
  • md indigo P900
  • md indigo A100
  • md indigo A200
  • md indigo A400
  • md indigo A700
  • md blue P50
  • md blue P100
  • md blue P200
  • md blue P300
  • md blue P400
  • md blue P500
  • md blue P600
  • md blue P700
  • md blue P800
  • md blue P900
  • md blue A100
  • md blue A200
  • md blue A400
  • md blue A700
  • md lightblue P50
  • md lightblue P100
  • md lightblue P200
  • md lightblue P300
  • md lightblue P400
  • md lightblue P500
  • md lightblue P600
  • md lightblue P700
  • md lightblue P800
  • md lightblue P900
  • md lightblue A100
  • md lightblue A200
  • md lightblue A400
  • md lightblue A700
  • md cyan P50
  • md cyan P100
  • md cyan P200
  • md cyan P300
  • md cyan P400
  • md cyan P500
  • md cyan P600
  • md cyan P700
  • md cyan P800
  • md cyan P900
  • md cyan A100
  • md cyan A200
  • md cyan A400
  • md cyan A700
  • md teal P50
  • md teal P100
  • md teal P200
  • md teal P300
  • md teal P400
  • md teal P500
  • md teal P600
  • md teal P700
  • md teal P800
  • md teal P900
  • md teal A100
  • md teal A200
  • md teal A400
  • md teal A700
  • md green P50
  • md green P100
  • md green P200
  • md green P300
  • md green P400
  • md green P500
  • md green P600
  • md green P700
  • md green P800
  • md green P900
  • md green A100
  • md green A200
  • md green A400
  • md green A700
  • md lightgreen P50
  • md lightgreen P100
  • md lightgreen P200
  • md lightgreen P300
  • md lightgreen P400
  • md lightgreen P500
  • md lightgreen P600
  • md lightgreen P700
  • md lightgreen P800
  • md lightgreen P900
  • md lightgreen A100
  • md lightgreen A200
  • md lightgreen A400
  • md lightgreen A700
  • md lime P50
  • md lime P100
  • md lime P200
  • md lime P300
  • md lime P400
  • md lime P500
  • md lime P600
  • md lime P700
  • md lime P800
  • md lime P900
  • md lime A100
  • md lime A200
  • md lime A400
  • md lime A700
  • md yellow P50
  • md yellow P100
  • md yellow P200
  • md yellow P300
  • md yellow P400
  • md yellow P500
  • md yellow P600
  • md yellow P700
  • md yellow P800
  • md yellow P900
  • md yellow A100
  • md yellow A200
  • md yellow A400
  • md yellow A700
  • md amber P50
  • md amber P100
  • md amber P200
  • md amber P300
  • md amber P400
  • md amber P500
  • md amber P600
  • md amber P700
  • md amber P800
  • md amber P900
  • md amber A100
  • md amber A200
  • md amber A400
  • md amber A700
  • md orange P50
  • md orange P100
  • md orange P200
  • md orange P300
  • md orange P400
  • md orange P500
  • md orange P600
  • md orange P700
  • md orange P800
  • md orange P900
  • md orange A100
  • md orange A200
  • md orange A400
  • md orange A700
  • md deeporange P50
  • md deeporange P100
  • md deeporange P200
  • md deeporange P300
  • md deeporange P400
  • md deeporange P500
  • md deeporange P600
  • md deeporange P700
  • md deeporange P800
  • md deeporange P900
  • md deeporange A100
  • md deeporange A200
  • md deeporange A400
  • md deeporange A700
  • md brown P50
  • md brown P100
  • md brown P200
  • md brown P300
  • md brown P400
  • md brown P500
  • md brown P600
  • md brown P700
  • md brown P800
  • md brown P900
  • md grey P50
  • md grey P100
  • md grey P200
  • md grey P300
  • md grey P400
  • md grey P500
  • md grey P600
  • md grey P700
  • md grey P800
  • md grey P900
  • md bluegrey P50
  • md bluegrey P100
  • md bluegrey P200
  • md bluegrey P300
  • md bluegrey P400
  • md bluegrey P500
  • md bluegrey P600
  • md bluegrey P700
  • md bluegrey P800
  • md bluegrey P900
  • md black P50
  • md black P100
  • md black P200
  • md black P300
  • md black P400
  • md black P500
  • md black P600
  • md black P700
  • md black P800
  • md black P900
{include file="custom/z_material_design.tpl"}