Hub HTML Template Documentations

Terminology

Let's get familiar with some of terminologies used throuout of this documentation.

References

Elements - Tags: Elements or <tag>s are basically what making an HTML page. e.g.

• <div> tags are used to define a page division. May also be referred as div

  										<div class="container">
  ...
  </div>
  									

• <a> In HTML links are defined with this tag.

  										<a href="https://example.com">
  ...
  </a>
  									

.class: Referring to any element with the specified class.

• .accordion Is referring to any element with accordion class name.

  											<div class="accordion">
  	...
  </div>
  										

element.class: Referring to an element by tag with the specified class.

• h4.accordion-title Is referring to h4 element with accordion-title class name.

  											<h4 class="accordion-title">
  ...
  </h4>
  										

Data Attributes

Data attributes are mostly used to initiate a pluin. Or storing options of that plugin. Let's say we want to make an element to be parallax. We can initiate parallax on that element by adding data-parallax="true".

• In this example we'll parallax a <figure> element in Y axis from 100px to -100px from it's original place.

  										<figure data-parallax="true" data-parallax-from='{"y": 100}' data-parallax-to='{"y": -100}' data-parallax-options='{"overflowHidden": false}'>
  	<img src="./assets/images/my-image.jpg"  alt="Hub"/>
  </figure>
  										

Plugin Options

You'll see through the template we've used data attributes the way that might be not familiar. For example look at data-parallax-from, data-parallax-to or data-parallax-options.

These data-attributes are used just for passing data to the plugin we're initiating, Or think of it as plugin options. Please also pay attention to the format.

Here values passed to data-attributes must be in valid JSON format. Basically each key need to be quoted. For example "y" is quoted here. but for the value, because it's a number, we don't need quotes. Please also pay attention data attributes are using single-quote ('). It means the JSON data which is between curly braces ({}) must be wrapped with single-quotes.

Elements and features

We'll go you through pretty much all elements, shortcodes and features available in Hub and we'll give you a boilerplate for each shortcodes so you can easily copy/paste codes and they're ready to use.

Beside this, we'll add requirements for what's neccessary for each shortcde to make it work if you're going to start from scratch. So you can find some information here if you got into some issues.

Plus, we'll add modifiers for each shortcodes. To change the look of each shortoce. Please keep in mind that all modifiers on an element may not work well or as expected together. So please refer to the demos and we provided.

CSS Variables

In Hub we used css variables, mostly to apply colors. This will make changing colors, such as website's primary color, so much easier than before.

As you can see in most of theme css files, from assets/css/themes.css all css variables are define in the :root pseudo-class. For Example:

								:root {
    --lqd-color-primary: #184341;
    --lqd-color-secondary: #54595F;
    --lqd-color-link: #5b7bfb;
    --lqd-color-link-hover: #181b31;
    --lqd-color-gradient-start: #007fff;
    --lqd-color-gradient-stop: #ff4d54;
}
							

--color-primary is used pretty much in all places. It'll define the accent color of the theme. As you see for buttons, icon colors etc.

Accordions

Accordions are useful when you want to toggle between hiding and showing large amount of content.

								<div class="accordion" id="accordion-1" role="tablist">

	<div class="accordion-item panel active">

		<div class="accordion-heading" role="tab" id="heading_accordion-collapse-1">
			<h4 class="accordion-title">
				<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-collapse-1" aria-expanded="true" aria-controls="accordion-collapse-1">
					Accordion Item 1
					<span class="accordion-expander">
						<i class="fa fa-angle-down"></i>
						<i class="fa fa-angle-up"></i>
					</span>
				</a>
			</h4>
		</div><!-- /.accordion-heading -->
		<div id="accordion-collapse-1" class="accordion-collapse collapse in" role="tabpanel" aria-labelledby="heading_accordion-collapse-1">
			<div class="accordion-content">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
			</div><!-- /.accordion-content -->
		</div><!-- /.accordion-collapse -->

	</div><!-- /.accordion-item -->

	<div class="accordion-item panel">

		<div class="accordion-heading" role="tab" id="heading_accordion-collapse-2">
			<h4 class="accordion-title">
				<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-collapse-2" aria-expanded="false" aria-controls="accordion-collapse-2">
					Accordion Item 2
					<span class="accordion-expander">
						<i class="fa fa-angle-down"></i>
						<i class="fa fa-angle-up"></i>
					</span>
				</a>
			</h4>
		</div><!-- /.accordion-heading -->
		<div id="accordion-collapse-2" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading_accordion-collapse-2">
			<div class="accordion-content">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
			</div><!-- /.accordion-content -->
		</div><!-- /.accordion-collapse -->

	</div><!-- /.accordion-item -->

</div><!-- /.accordion -->
							

Accordion Requirements

• Each accordion element must have a unique id.
• .accordion-heading elements must have a unique id.
• data-parent attributes are neccessary on a elements inside .accordion-title.
• To make an item expanded when page loads, add .active classname to the .accordion-item element. Change aria-expanded="false" to aria-expanded="true" on the a tag inside .accordion-title.

Accordion Modifiers

All classnames will be added to .accordion element.

• Accordion Sizes
  • .accordion-xs
  • .accordion-sm
  • .accordion-md
  • .accordion-lg
• Active Styles
  • .accordion-active-has-fill
  • .accordion-active-has-shadow
• Border Styles
  • .accordion-body-underlined
  • .accordion-body-bordered
  • .accordion-title-underlined
  • .accordion-title-bordered
• Roundness
  • .accordion-title-round
  • .accordion-title-circle
  • .accordion-body-round
• Expander Position
  • .accordion-expander-left

Buttons

Buttons are used in various places of the template. From simple buttons with internal/external links to lightbox buttons and buttons inside forms.

								<a href="#" class="btn btn-solid">
    <span class="btn-txt">Get access</span>
    <span class="btn-icon">
        <i class="lqd-icn-ess icon-md-arrow-forward"></i>
    </span>
</a>
							

Button Modifiers

All classnames will be added to .btn element.

• Button Styles
  • .btn-solid
  • .btn-naked
  • .btn-underlined
• Button Sizes
  • .btn-xs
  • .btn-sm
  • .btn-md
  • .btn-lg
  • .btn-xl
• Button Border Sizes - ( For underlined button )
  • .border-thin
  • .border-thick
  • .border-thicker
• Button Icon Styles
  • .btn-icon-shaped
  • .btn-icon-solid
• Button Icon Sizes ( Only for shaped icons )
  • .btn-icon-xsm
  • .btn-icon-sm
  • .btn-icon-md
  • .btn-icon-lg
  • .btn-icon-xl
• Button Icon Roundness ( Only for shaped icons )
  • .btn-icon-semi-round
  • .btn-icon-round
  • .btn-icon-circle
• Button Icon Position
  • .btn-icon-right
  • .btn-icon-left
  • .btn-icon-block.btn-icon-bottom
  • .btn-icon-block.btn-icon-top

Carousels

The carousel for cycling through elements, like a carousel (slideshow).

								<div class="carousel-container">

	<div class="carousel-items row" data-lqd-flickity>

		<div class="carousel-item col-xs-12">
			<figure>
				<img src="./assets/demo/my-test-image.jpg" alt="Hub">
			</figure>
		</div><!-- /.carousel-item -->

	</div><!-- /.carousel-items -->

</div><!-- /.carousel-container -->
							

Carousel Requirements

• Carousel will be initiated by adding data-lqd-flickity attribute to .carousel-items element.
• .carousel-items must be wrapped with .carousel-container
• Anything you want to add as a carousel item, must be wrapped in .carousel-item element.
• You can specify the width of each carousel item by adding column classnames e.g. .col-md-3, .col-md-6, or classnames defined in utility.css like .w-45percent to .carousel-item.

Carousel Plugin Options

Carousel options will be passed to the data-lqd-flickity attribute. Please check Data Attributes section to see how to use plugin options.

• contain: true, false
• prevNextButtons: true, false
• pageDots: true, false
• adaptiveHeight: true, false
• groupCells: true, false
• wrapAround: true, false
• autoplay: true, false or it can be a number. In milliseconds.
• fullwidthSide: true, false
• randomVerOffset: true, false
• marquee: true, false. set to true to make it slide continusely like a marquee element
• marqueeTickerSpeed: the default speed is set to 1

Carousel Modifiers

These classnames will be added to .carousel-container element

• Navigation Shapes
  • .carousel-nav-shaped.carousel-nav-circle
  • .carousel-nav-shaped.carousel-nav-square
• Navigation Fill
  • .carousel-nav-solid
  • .carousel-nav-bordered
• Navigation Sizes
  • .carousel-nav-sm
  • .carousel-nav-md
  • .carousel-nav-lg
  • .carousel-nav-xl
• Navigation Positions
  • .carousel-nav-floated
  • .carousel-nav-center
  • .carousel-nav-left
  • .carousel-nav-right
  • .carousel-nav-top
  • .carousel-nav-bottom
  • .carousel-nav-middle
• Navigation Directions
  • .carousel-nav-vertical
• Dots Sizes
  • .carousel-dots-sm
  • .carousel-dots-md
  • .carousel-dots-lg
• Dots Styles
  • .carousel-dots-style1
  • .carousel-dots-style2
  • .carousel-dots-style3
  • .carousel-dots-style4
• Dots Alignments
  • .carousel-dots-left
  • .carousel-dots-center
  • .carousel-dots-right
• Dots Position - Mobile
  • .carousel-dots-mobile-outside
  • .carousel-dots-mobile-inside
• Dots Alignments - Mobile
  • .carousel-dots-mobile-left
  • .carousel-dots-mobile-center
  • .carousel-dots-mobile-right

Flip Boxes

								<div class="ld-flipbox">
	<div class="ld-flipbox-wrap">

		<div class="ld-flipbox-face ld-flipbox-front">

			<span class="ld-flipbox-overlay ld-overlay"></span>

			<div class="ld-flipbox-inner">

				<h3 class="font-size-24 mt-0">Flipbox Title</h3>
				<p class="mb-0">All transactions that occur on Envato.</p>

			</div><!-- /.ld-flipbox-inner -->

		</div><!-- /.ld-flipbox-front -->

		<div class="ld-flipbox-face ld-flipbox-back">

			<span class="ld-flipbox-overlay ld-overlay"></span>

			<div class="ld-flipbox-inner">

				<a href="#" class="btn btn-solid font-size-12 lh-2 text-uppercase ltr-sp-175 btn-white">
					<span>
						<span class="btn-txt">Discover One</span>
					</span>
				</a>

			</div><!-- /.ld-flipbox-inner -->

		</div><!-- /.ld-flipbox-back -->

	</div><!-- /.ld-flipbox-wrap -->
</div><!-- /.ld-flipbox -->
							

Flipbox Requirements

• Back content's height will be based on the content on front side face. So contents in back face can't be taller than front contents.

Flipbox Modifiers

• Rotating Directions
  • Right to left: .ld-flipbox-rl
  • Bottom to top: .ld-flipbox-bt
  • Top to bottom: .ld-flipbox-tb
• Shadows
  • .ld-flipbox-shadow-onhover
• Adding background to flipbox faces
  • Add any background color or image to .ld-flipbox-facce element.
  • If you want a gradient or faded solid overlay over the background, you can simply add that to .ld-flipbox-overlay element.

Google Maps

								<div class="ld-gmap-container">
	<div class="ld-gmap"
		data-plugin-map="true"
		data-plugin-options='{ "address": "7420 Shore Rd, Brooklyn, NY 11209, USA" }'>
	</div><!-- /.ld-gmap -->
</div><!-- /.ld-gmap-container -->
							

Google Maps Requirements

• You'll need to get your api key first. Please follow this article.

Google Maps Options

• All options will be assigned to data-plugin-options on the element with data-plugin-map="true".
  • address: It's obviously the address. It can be the full address string or lat long. e.g. 51.507772, -0.127543
  • style:
    • wy
    • blueEssence
    • lightMonochrome
    • assassinsCreedIV
    • unsaturatedBrowns
    • classic
  • marker_option:
    • image
    • html
  • marker: "assets/img/map-marker/marker-1.svg"

Iconboxes

Iconboxes are used to show information with imaeg, static or animated icons.

								<div class="iconbox iconbox-heading-sm">
	<div class="iconbox-icon-wrap">
		<span class="iconbox-icon-container">
			<i class="icon-ecommerce_diamond"></i>
		</span>
	</div><!-- /.iconbox-icon-wrap -->
	<h3 class="font-weight-semibold">Hover me</h3>
	<div class="contents">
		<p>Zero broker commission</p>
	</div><!-- /.contents -->
</div><!-- /.iconbox -->
							

Iconbox Requirements

• If you want to use animted icons, please use Linea iconset. Or use icons with the same structure as Liean's icons.

Iconbox Modifiers

• Icon Positions
  • .iconbox-side
  • .iconbox-inline
    • In inline iconbox we'll move the heading (h3) element outside of .content element.

      														<div class="iconbox iconbox-inline">
      	<div class="iconbox-icon-wrap">
      		<span class="iconbox-icon-container">
      			<i class="fa fa-code"></i>
      		</span>
      	</div><!-- /.iconbox-icon-wrap -->
      	<h3>TRANSPORTATION</h3>
      	<div class="contents">
      		<p>Spectacular train rides, breathtaking cable car ascents, overnight cruise ships, scenic day ferries, private first-class motorcoaches.</p>
      	</div><!-- /.contents -->
      </div>
      												

• Icon Shapes
  • .iconbox-circle
  • .iconbox-lozenge
• Iconbox Icon Effects
  • .iconbox-icon-ripple
  • .iconbox-icon-linked
• Hover effects
  • .lqd-iconbox-scale

Adding Animated Icons

								<div class="iconbox text-left iconbox-xl iconbox-heading-sm" data-animate-icon="true" data-plugin-options='{"color":"#780bee:#1de1d1"}'>
	<div class="iconbox-icon-wrap">
		<span class="iconbox-icon-container">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
				<path stroke-width="2" stroke-miterlimit="10" d="M32,47L63,47L63,5L1,5L1,47L18,47L18,59Z"></path>
				<path stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23,26L30,33L 43,20"></path>
			</svg>
		</span>
	</div><!-- /.iconbox-icon-wrap -->
	<div class="contents">
		<h3>Bitcoin improvement proposals</h3>
		<p>Having a BIP here does not make it a formally accepted standard until its status become.</p>
	</div><!-- /.contents -->
</div><!-- /.iconbox -->
							

Animated Icon Requirements

• To have an icon that can be animated, as we mentioned above you can take an icon from Linea iconset. Copy the SVG code of an icon and paste it in .iconbox-icon-container element.
• Add data-animate-icon="true" to .iconbox element.

Animated Icon Options

All options will be added to data-plugin-options on .iconbox element.

• color: it can be a single color. e.g. #f42958. Or multiple colors for gradient. seperated by :. e.g. #780bee:#1de1d1
• hoverColor: as the same as color option
• delay: time for starting delay. In milliseconds.
• resetOnHover: true, false

Media Gallery

								<div class="ld-media-row row d-flex" data-liquid-masonry="true">

	<div class="lqd-column col-md-3 col-sm-6 masonry-item">
		<div class="ld-media-item">
			<figure data-responsive-bg="true">
				<img class="invisible" src="./assets/demo/media-elements/md-1.jpg" alt="Media Gallery">
			</figure>
			<div class="ld-media-item-overlay d-flex flex-column align-items-center text-center justify-content-center">
				<div class="ld-media-bg"></div>
				<div class="ld-media-content">
					<span class="ld-media-icon">
						<span class="ld-media-icon-inner">
							<i class="icon-ion-ios-add"></i>
						</span>
					</span>
				</div><!-- /.ld-media-content -->
			</div><!-- /.ld-media-item-overlay -->
			<a href="./assets/demo/media-elements/md-1.jpg" class="liquid-overlay-link fresco" data-fresco-group="media-group-1"></a>
		</div><!-- /.ld-media-item -->
	</div><!-- /.col-md-3 -->

	<div class="lqd-column col-md-6 masonry-item">
		<div class="ld-media-item contents-visible">
			<figure data-responsive-bg="true">
				<img class="invisible" src="./assets/demo/media-elements/md-9.jpg" alt="Media Gallery">
			</figure>
			<div class="ld-media-item-overlay d-flex flex-column align-items-center text-center justify-content-center">
				<div class="ld-media-bg"></div>
				<div class="ld-media-content">
					<span class="ld-media-icon icon-play bordered">
						<span class="ld-media-icon-inner">
							<i class="fa fa-play"></i>
						</span>
					</span>
				</div><!-- /.ld-media-content -->
			</div><!-- /.ld-media-item-overlay -->
			<a href="https://www.youtube.com/watch?v=WVPRkcczXCY&t" class="liquid-overlay-link fresco" data-fresco-group="media-group-2"></a>
		</div><!-- /.ld-media-item -->
	</div><!-- /.col-md-3 -->

</div><!-- /.ld-media-row -->
							

Media Gallery Requirements

• data-liquid-masonry="true on .ld-media-row is required if you want the masonry layout.
• data-fresco-group is required on .liquid-overlay-link if you want to show the lightbox as a gellry lightbox.
• Column widths can be anything you wish.

Media Gallery Overlay Contents

You can put almost any content inside .ld-media-content.

• Simple icons
  Add any icon there with <i></i> element

  										<span class="ld-media-icon">
  	<span class="ld-media-icon-inner">
  		<i class="icon-ld-search"></i>
  	</span>
  </span>
  									

• Video Play Icons
  We prepared 2 different styles for play icon. With 3 different sizes.

  										<span class="ld-media-icon icon-play bordered">
  	<span class="ld-media-icon-inner">
  		<i class="fa fa-play"></i>
  	</span>
  </span>
  									

  Classnames you can add on .ld-media-icon.icon-play elements are:
  Fills
  • .bordered
  • .solid
  Sizes
  • .size-sm
  • .size-md
  • .size-lg
• Simple Content

  										<div class="ld-media-txt">
  	<h3>My content</h3>
  </div>
  									

Media Gallery Modifiers

Following classnames can be added to ld-media-item element.

• Contents Visibility
  • .contents-visible
• Shadows
  • .shadow-onhover
• Overlay Background color
  • You can simply apply any color to .ld-media-bg element.

Parallax

You can easily make anything parallax! It can be an image, a column, a shortcode or anything else.

• To start add data-parallax="true" to the element you want.

• To define starting state of the element, add data-paralla-from=''. values going inside this attribute can be css transform properties

  										<div class="liquid-img-container-inner"
  	data-parallax="true"
  	data-parallax-from='{"y": 80}'
  >
  

• To define the destination of the element, or the state of the ending of the parallax add data-paralla-to='' to the element.

  										<div class="liquid-img-container-inner"
  	data-parallax="true"
  	data-parallax-from='{"y": 80}'
  	data-parallax-to='{"y": -80}'
  >
  

• There are some parallax options, such as easing, duration etc. that should go to data-parallax-options='' attribute.

  										<div class="liquid-img-container-inner"
  	data-parallax="true"
  	data-parallax-from='{"y": 80}'
  	data-parallax-to='{"y": -80}'
  	data-parallax-options='{"overflowHidden": false,"easing": "linear"}'
  >
  

Parallax Options

Parallax options will be passed to the data-parallax-options attribute. Please check Data Attributes section to see how to use plugin options.

• duration: Number ( default: 1800 ) it can be also in percentage. e.g. "100%"
• offset: Number ( default: 0 )
• triggerHook: String or number from 0 to 1.
  Strings can be used:
  • onEnter
  • onCenter
  • onLeave
• easing: String ( default: "linear" )

  in	out	in-out
  'easeInQuad'	'easeOutQuad'	'easeInOutQuad'
  'easeInCubic'	'easeOutCubic'	'easeInOutCubic'
  'easeInQuart'	'easeOutQuart'	'easeInOutQuart'
  'easeInQuint'	'easeOutQuint'	'easeInOutQuint'
  'easeInSine'	'easeOutSine'	'easeInOutSine'
  'easeInExpo'	'easeOutExpo'	'easeInOutExpo'
  'easeInCirc'	'easeOutCirc'	'easeInOutCirc'
  'easeInBack'	'easeOutBack'	'easeInOutBack'

• overflowHidden: Boolean ( default: true )

Particles

								<div class="ld-particles-container">

	<div
	class="ld-particles-inner"
	id="particles-1"
	data-particles="true"
	data-particles-options='{ "particles":{"shape": {"type":["circle"]} } }'>
	</div><!-- /.re-particles-inner -->

</div><!-- /.ld-particles-container -->
							

Particles Requirements

• .ld-particles-inner must have a unique id.
• There should be at least "particles" option inside data-particles-options. But don't worry! setting up options for particles is so easy. We'll go through shortly.

Particles Options

										<div class="lqd-particles-bg-wrap">
	<div class="ld-particles-container">

		<div
		class="ld-particles-inner"
		id="particles-1"
		data-particles="true"
		data-particles-options='{ "particles":{"shape": {"type":["circle"]} } }'>
		</div><!-- /.re-particles-inner -->

	</div><!-- /.ld-particles-container -->
</div><!-- /.lqd-particles-bg-wrap -->
									

Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.

								<div class="lqd-tabs">
	<ul class="nav lqd-tabs-nav" role="tablist">
		<li role="presentation" class="active">
			<a href="#ld-tab-pane-1" aria-expanded="false" aria-controls="ld-tab-pane-1" role="tab" data-toggle="tab">Tab 1</a>
		</li>
		<li role="presentation">
			<a href="#ld-tab-pane-2" aria-expanded="false" aria-controls="ld-tab-pane-2" role="tab" data-toggle="tab">Tab 2</a>
		</li>
	</ul>
	<div class="lqd-tabs-content">
		<div id="ld-tab-pane-1" role="tabpanel" class="lqd-tabs-pane fade active in">
			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum magnam dignissimos similique.</p>
		</div><!-- /.tab-pane -->
		<div id="ld-tab-pane-2" role="tabpanel" class="lqd-tabs-pane fade">
			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum magnam dignissimos similique.</p>
		</div><!-- /.lqd-tab-pane -->
	</div><!-- /.lqd-tabs-content -->
</div><!-- /.tabs -->
							

Tabs Requirements

• All tab nav items will be placed inside .lqd-tabs-nav element.
• All tab content will be placed inside .lqd-tabs-content element.
• Any tab content will be wrapped with .lqd-tabs-pane element.

Tabs Modifiers

Since this element is a little bit complicated, we suggest copy/paste the style you like in demos and start changing from there.

Video Background

Hub provides support for video background. Both youtube and local hosted videos.

Youtube Video Background

								<div class="lqd-vbg-wrap">
	<div class="lqd-vbg-inner">
		<span class="lqd-vbg-loader"></span>
		<div class="inline-YTPlayer">
			<div class="lqd-vbg-video" data-video-bg="true" data-youtube-options='{"videoURL": "https://www.youtube.com/watch?v=-z6XVI-nCZs"}'>
			</div>
		</div><!-- /.inline-YTPlayer -->
	</div><!-- /.lqd-vbg-inner -->
</div><!-- /.lqd-vbg-wrap -->
							

Local Hosted Video Background

								<div class="lqd-vbg-wrap">
	<div class="lqd-vbg-inner">
		<span class="lqd-vbg-loader"></span>
		<video class="lqd-vbg-video" data-video-bg="true" autoplay loop>
			<source src="assets/media/Raindrops_Videvo.m4v" type="video/mp4">
			<source src="assets/media/Raindrops_Videvo.webm" type="video/webm">
		</video><!-- /.lqd-vbg-video -->
	</div><!-- /.lqd-vbg-inner -->
</div><!-- /.lqd-vbg-wrap -->
							

Setting up contact form

To setup the contact form, you'll need to provide you're email ( The email that receives emails from contact form ) from ./assets/php/mailer.php.

									<?php
if($_POST)
{
	$to_email = "your_email@example.com" // replace with own email here

	...

>
								

<script src="./assets/js/liquid-ajax-contact-form.min.js"></script>
								

Make sure you have fields with name, email and message name attribute. Also form MUST have a class of lqd-cf-form.

Setting up newsletter form

Hub HTML using Mailchimp for newsletter form. So to get started you'll need a Mailchimp account.

After getting your account ready, from Audience > Signup Forms select Embedded form.

Click finish to see the HTML markup ready for you.

Go to Copy/paste onto your site section and copy the value of action attribute

Now go back to the newsletter form from Hub template and paste the value inside action attribute. e.g.

	<script src="./assets/js/liquid-ajax-mailchimp.min.js"></script>
									

Helper Classes

We added some helper classes to the template that might come handy to you.