Module code defaults. Every Module should be developed using the following example.

[aw2.set module.post_class='{{aw2.get module.slug}}_post' module.post_unique_class='{token}' /]

<link rel="stylesheet" href="#">

[aw2.client less]
[role="module"]{
	&.[aw2.get module.post_unique_class /]{
		header{
			h2{
				color: #f3f3f3;
			}
		}
		[role="content"]{
			CUSTOM CSS HERE!
		}
		footer{
			p{
				color: #000000;
			}
		}
	}
}
[/aw2.client]

<article class="container [aw2.get module.post_class /] [aw2.get module.post_unique_class /] [aw2.get module.class /]" role="module" module_type='carousel' title="Carousel style 1">
	<header class="h2">
		<h2 class="text-center blockh1">h1-h6 tags go here along with extra if needed or If empty do not add footer tag.</h2>
	</header>
	<section role=content class="row">
		Your content here. Can start with div or anything
	</section>
	<footer>
		Your footer here. If empty do not add footer tag.
	</footer>
</article>

<!-- Initialize Swiper -->
<script type="spa/axn" axn="swiper.swiper_init"> </script>

role: Should not contain underscore ( _ ) eg: module-xx

module_type: Type of module eg: carousel, cta, hero-banner, slider. Should not contain underscore.

title: Module type with style variation. Eg: carousel style one, carousel with button.

 

Below is a carousel example.

      
      <article  class="col-md-12" role="module" module_type='carousel' title="Carousel 1">
      	<header>
      		<h2 class="text-center">Carousel 1</h2>
      	</header>
      	<section role=content>
      		<section role=carousel data-interval="5000" class="carousel carousel-fade" >
      			<section class="text-center carousel-inner" role=slides>
      				<section class="item active" role=slide>
      					<h2>Slide One</h2>
      					<img src="http://lorempixel.com/1200/551" alt="First slide">
      				</section>
      				<section class="item" role=slide>
      					<h2>Slide 2</h2>
      					<img src="http://lorempixel.com/1200/550" alt="First slide">
      				</section>
      				<section class="item" role=slide>
      					<h2>Slide 3</h2>
      					<img src="http://lorempixel.com/1200/552" alt="First slide">
      				</section>
      			</section>
      			<footer>
      				<ol class="carousel-indicators">
      					<li data-target="[role='carousel']" data-slide-to="0" class="active"></li>
      					<li data-target="[role='carousel']" data-slide-to="1"></li>
      					<li data-target="[role='carousel']" data-slide-to="2"></li>
      				</ol>
      				<a class="left carousel-control" href="[role='carousel']" data-slide="prev" role="button">
      					<span class="glyphicon glyphicon-chevron-left"></span>
      				</a>
      				<a class="right carousel-control" href="[role='carousel']" data-slide="next" role="button">
      					<span class="glyphicon glyphicon-chevron-right"></span>
      				</a>
      			</footer>
      		</section>
      	</section>
      	<footer></footer>
      </article>