#Template Minimalist
#Defaults {ctaTextColor=, postTitleColor=BLACK Dark, boxColor=WHITE Dark, borderColor=BLUE #2 Light, borderColorLabel=border}
<a href="{postHref}" target="{linkTarget}" {linkRel} class="{utemplate}">
    {comment}
    <style>
        .{utemplate} {
            padding:0px;
            margin: 0;
            padding-top:1em!important;
            padding-bottom:1em!important;
            width:100%;
            display: block;
            font-weight:bold;
            background-color:{boxColor};
            border:0!important;
            {if borderColor}
                border-left:4px solid {borderColor}!important;
            {/if}
            {if hasShadow}
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
            {/if}
            text-decoration:none;
        }
        .{utemplate}:active, .{utemplate}:hover {
            opacity: 1;
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            text-decoration:none;
        }
        .{utemplate} {
            transition: background-color 250ms;
            webkit-transition: background-color 250ms;
            opacity: {boxOpacity};
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
        }
        .{utemplate} .ctaText {
            font-weight:bold;
            color:{ctaTextColor};
            text-decoration:none;
            font-size: 16px;
			float:left;
        }
        .{utemplate} .postTitle {
            color:{postTitleColor};
            text-decoration: underline!important;
            font-size: 16px;
        }
        .{utemplate}:hover .postTitle {
            text-decoration: underline!important;
        }
    </style>
    <div style="padding-left:1em; padding-right:1em;">
        <span class="ctaText">{ctaText}</span>&nbsp;
        <span class="postTitle">{postTitle}</span>
    </div>
</a>

#Template Shock
#Defaults {ctaTextColor=GREY #1 Light, postTitleColor=BLUE #2 Dark, boxColor=ORANGE Light, borderColor=ORANGE Dark, borderColorLabel=hover}
<a href="{postHref}" target="{linkTarget}" {linkRel} class="{utemplate}">
    {comment}
    <style>
        .{utemplate}
        , .{utemplate} .postImageUrl
        , .{utemplate} .centered-text-area {
            min-height: 80px;
            position: relative;
        }
        .{utemplate}
        , .{utemplate}:hover
        , .{utemplate}:visited
        , .{utemplate}:active {
            border:0!important;
        }
        .{utemplate} .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        .{utemplate} {
            display: block;
            transition: background-color 250ms;
            webkit-transition: background-color 250ms;
            width: 100%;
            opacity: {boxOpacity};
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {boxColor};
            {if hasShadow}
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
            {/if}
        }
        .{utemplate}:active
        , .{utemplate}:hover {
            opacity: 1;
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {borderColor};
        }
        .{utemplate} .centered-text-area {
            width: 100%;
            position: relative;
        }
        .{utemplate} .ctaText {
            border-bottom: 0 solid #fff;
            color: {ctaTextColor};
            font-size: 16px;
            font-weight: bold;
            margin: 0;
            padding: 0;
            text-decoration: underline;
			float: left;
        }
        .{utemplate} .postTitle {
            color: {postTitleColor};
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .{utemplate} .ctaButton {
            background-color: {boxColorHover}!important;
            color: {ctaTextColor};
            border: none;
            border-radius: 3px;
            box-shadow: none;
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            moz-border-radius: 3px;
            text-align: center;
            text-decoration: none;
            text-shadow: none;
            width: 80px;
            min-height: 80px;
            background: url({assetsImages}simple-arrow.png)no-repeat;
            position: absolute;
            left: 0;
            top: 0;
        }
        .{utemplate}:hover .ctaButton {
            background-color: {borderColorHover}!important;
        }
        .{utemplate} .centered-text {
            display: table;
            height: 80px;
            padding-right: 18px;
            top: 0;
			width: 100%;
        }
        .{utemplate} .{utemplate}-content {
                display: table-cell;
				margin: 0;
				padding: 0;
				padding-left: 108px;
				position: relative;
				vertical-align: middle;
				width: 100%;
				padding-right: 18px;
        }
        .{utemplate}:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <div class="centered-text-area">
        <div class="centered-text">
            <div class="{utemplate}-content">
                <span class="ctaText">{ctaText}</span>&nbsp; 
                <span class="postTitle">{postTitle}</span>
            </div>
        </div>
    </div>
    <div class="ctaButton"></div>
</a>

#Template Ruby
#Defaults {ctaTextColor=BLUE #1 Light, postTitleColor=GREY #1 Light, boxColor=BLUE #2 Dark, borderColor=, borderColorLabel=arrow}
<a href="{postHref}" target="{linkTarget}" {linkRel} class="{utemplate}">
    {comment}
    <style>
        .{utemplate}
        , .{utemplate} .postImageUrl
        , .{utemplate} .centered-text-area {
            height: 130px;
            position: relative;
        }
        .{utemplate}
        , .{utemplate}:hover
        , .{utemplate}:visited
        , .{utemplate}:active {
            border:0!important;
        }
        .{utemplate} .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        .{utemplate} {
            display: block;
            transition: background-color 250ms;
            webkit-transition: background-color 250ms;
            width: 100%;
            opacity: {boxOpacity};
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {boxColor};
            {if hasShadow}
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
            {/if}
        }
        .{utemplate}:active
        , .{utemplate}:hover {
            opacity: 1;
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {boxColorHover};
        }
        .{utemplate} .postImageUrl {
            background-position: center;
            background-size: cover;
            float: right;
            margin: 0;
            padding: 0;
            width: 31.59%;
        }
        .{utemplate} .centered-text-area {
            float: left;
            width: 65.65%;
            padding:0;
            margin:0;
        }
        .{utemplate} .centered-text {
            display: table;
            height: 130px;
            right: 0;
            top: 0;
            padding:0;
            margin:0;
			float: left;
			width: 100%;
        }
        .{utemplate} .{utemplate}-content {
            display: table-cell;
            margin: 0;
            padding: 0 0px 0 74px;
            position: relative;
            vertical-align: middle;
            width: 100%;
        }
        .{utemplate} .ctaText {
            border-bottom: 0 solid #fff;
            color: {ctaTextColor};
            font-size: 13px;
            font-weight: bold;
            margin: 0;
            padding: 0;
        }
        .{utemplate} .postTitle {
            color: {postTitleColor};
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            padding: 0;
        }
        .{utemplate} .ctaButton {
            background: url({assetsImages}next-arrow.png)no-repeat;
            display: inline-block;
            height: 130px;
            width: 54px;
        }
        .{utemplate} .ctaButton {
            background-color: {borderColor};
            margin-left: 10px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .{utemplate}:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <div class="postImageUrl" style="background-image:url({postImageUrl});"></div>
    <div class="centered-text-area">
        <div class="centered-text">
            <div class="{utemplate}-content">
                <div class="ctaText">{ctaText}</div>
                <div style="clear:both"></div>
                <div class="postTitle">{postTitle}</div>
            </div>
        </div>
        <div class="ctaButton"></div>
    </div>
</a>

#Template Button
#Defaults {ctaTextColor=WHITE Light, postTitleColor=GREY #1 Light, boxColor=BLACK Light, borderColor=AQUA Light, borderColorLabel=button}
<a href="{postHref}" target="{linkTarget}" {linkRel} class="{utemplate}">
    {comment}
    <style>
        .{utemplate}
        , .{utemplate} .postImageUrl
        , .{utemplate} .centered-text-area {
            min-height: 86px;
            position: relative;
        }
        .{utemplate}
        , .{utemplate}:hover
        , .{utemplate}:visited
        , .{utemplate}:active {
            border:0!important;
        }
        .{utemplate} {
            display: block;
            transition: background-color 250ms;
            webkit-transition: background-color 250ms;
            width: 100%;
            opacity: {boxOpacity};
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {boxColor};
            {if hasShadow}
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
            {/if}
        }
        .{utemplate}:active
        , .{utemplate}:hover {
            opacity: 1;
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
        }
        .{utemplate} .postImageUrl {
            background-position: center;
            background-size: cover;
            float: right;
            margin: 0;
            padding: 0;
            width: 30%;
        }
        .{utemplate} .centered-text-area {
            float: left;
            width: 70%;
            padding:0;
            margin:0;
        }
        .{utemplate} .ctaText {
            border-bottom: 0 solid #fff;
            color: {ctaTextColor};
            font-size: 13px;
            font-weight: bold;
            margin: 0;
            padding: 0;
        }
        .{utemplate} .postTitle {
            color: {postTitleColor};
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            padding: 0;
            width: 80%;
			display: inline-block;
			float: right;
        }
        .{utemplate} .ctaButton {
            background: {borderColor};
            color: {ctaTextColor};
            border: none;
            border-radius: 3px;
            box-shadow: none;
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            margin: 18px 14px 18px 14px;
            moz-border-radius: 3px;
            padding: 12px 0;
            text-align: center;
            text-decoration: none;
            text-shadow: none;
            webkit-border-radius: 3px;
            position: absolute;
			float: left;
			padding: 5px 3%;
			width: auto;
			left: 0;
			top: 8px;
        }
        .{utemplate}:hover .ctaButton {
            background: {borderColorHover};
        }
        .{utemplate} .centered-text {
            display: table;
            height: 86px;
            padding:0;
            margin:0;
            padding-left: 0px!important;
            top: 0;
			width: 100%;
        }
        .{utemplate} .{utemplate}-content {
            display: table-cell;
            margin: 0;
            padding: 0;
            padding-right: 10px;
            position: relative;
            vertical-align: middle;
            width: 100%;
        }
        .{utemplate}:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <div class="centered-text-area">
        <div class="centered-text">
            <div class="{utemplate}-content">
                <div class="postTitle">{postTitle}</div>
						<div class="ctaButton">{ctaText}</div>  

            </div>
        </div>
    </div>
    <div class="postImageUrl" style="background-image:url({postImageUrl});"></div>
</a>

#Template Kangoo
#Defaults {ctaTextColor=BLUE #2 Light, postTitleColor=BLACK Dark, boxColor=WHITE Dark, borderColor=WHITE Light, borderColorLabel=hover}
<a href="{postHref}" target="{linkTarget}" {linkRel} class="{utemplate}">
    {comment}
    <style>
        .{utemplate}
        , .{utemplate} .postImageUrl
        , .{utemplate} .imgUrl
        , .{utemplate} .centered-text-area {
            min-height: 100px;
            position: relative;
        }
        .{utemplate}
        , .{utemplate}:hover
        , .{utemplate}:visited
        , .{utemplate}:active {
            border:0!important;
        }
        .{utemplate} {
            display: block;
            transition: background-color 250ms;
            webkit-transition: background-color 250ms;
            width: 100%;
            opacity: {boxOpacity};
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {boxColor};
            {if hasShadow}
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
            {/if}
        }
        .{utemplate}:active
        , .{utemplate}:hover {
            opacity: 1;
            transition: opacity 250ms;
            webkit-transition: opacity 250ms;
            background-color: {borderColor};
        }
        .{utemplate} .postImageUrl
        , .{utemplate} .imgUrl {
            background-position: center;
            background-size: cover;
            float: right;
            margin: 0;
            padding: 0;
        }
        .{utemplate} .postImageUrl {
            width: 30%;
        }
        .{utemplate} .imgUrl {
            width: 100%;
        }
        .{utemplate} .centered-text-area {
            float: right;
            width: 70%;
            padding:0;
            margin:0;
        }
        .{utemplate} .centered-text {
            display: table;
            height: 100px;
            left: 0;
            top: 0;
            padding:0;
            margin:0;
			width: 100%;
        }
        .{utemplate} .{utemplate}-content {
            display: table-cell;
            margin: 0;
            padding: 0 10px 0 10px;
            position: relative;
            vertical-align: middle;
            width: 100%;
        }
        .{utemplate} .ctaText {
            border-bottom: 0 solid #fff;
            color: {ctaTextColor};
            font-size: 13px;
            font-weight: bold;
			text-align:left;
            margin: 0;
            padding: 0;
            text-decoration: underline;
        }
        .{utemplate} .postTitle {
            color: {postTitleColor};
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            padding: 0;
        }
        .{utemplate} .ctaButton {
            background-color: {borderColor};
            margin-left: 10px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .{utemplate}:hover .imgUrl {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
        }
        .{utemplate} .imgUrl {
            -webkit-transition: -webkit-transform 0.4s ease-in-out;
            -moz-transition: -moz-transform 0.4s ease-in-out;
            -o-transition: -o-transform 0.4s ease-in-out;
            -ms-transition: -ms-transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out;
        }
        .{utemplate}:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
        <div class="imgUrl" style="background-image:url({postImageUrl});"></div>
    </div>
    <div class="centered-text-area">
        <div class="centered-text">
            <div class="{utemplate}-content">
                <div class="ctaText">{ctaText}</div>
                <div class="clear:both;"></div>
                <div class="postTitle">{postTitle}</div>
            </div>
        </div>
    </div>
</a>
