{{#unless iconArrow }}<div {{/unless }}
{{#if iconArrow }} <a href="javascript:;" {{/if}} class="teaser {{ styleModifier }}">
	{{#if teaserMedia }}
		{{#if isClickable }}
			<a href="javascript:;" class="teaser__media t--size-8 {{ sizeMedia }}" style="background-image:url({{ imgProvider }}732/504)">
		{{/if }}

		{{#unless isClickable }}
		 	<div class="teaser__media t--size-8 {{ sizeMedia }}" style="background-image:url({{ imgProvider }}732/504)">
		{{/unless }}

			{{#if showLabel }}
				<div class="aux-pos-top">
					{{#if labelGrey }}
						{{ render "atoms/text/label:label-grey" text="10 Jan 2015"}}
					{{/if}}
					{{#if labelOrange }}
						{{ render "atoms/text/label:label-orange" text="Our clients"}}
					{{/if }}
				</div>
			{{/if }}

			{{#if internalIcon }}
				{{ render "molecules/buttons/button-image-gallery" internal=true size="610x345" hasImage=true }}
			{{/if }}

			{{#if externalIcon }}
				{{ render "molecules/buttons/button-image-gallery" external=true hasImage=false }}
			{{/if }}

		{{#if isClickable }}
			</a>
			{{#if imgSpace }}
			{{ render "atoms/global/space" space=2 }}
			{{/if }}
		{{else}}
			</div>
			{{#if imgSpace }}
			{{ render "atoms/global/space" space=2 }}
			{{/if}}
		{{/if }}
	{{/if }}

	{{#if teaserContentLink }}
		<div class="teaser__body no-padding-right no-padding-left">
			{{#if teaserTitle }}<h3 class="teaser__title">Lorem ipsum dolor</h3>{{/if }}
			<p class="teaser__copy"><a href="javascript:;" class="text-main lk-icon">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae modi illo aut beatae repellat <i class="icons-internal-link"></i></a></p>
		</div>
	{{/if }}

	{{#if teaserContent }}
		<div class="teaser__body no-padding-right no-padding-left">
			{{#if teaserTitle }}<h3 class="teaser__title">Lorem ipsum dolor</h3>{{/if }}
			<p class="teaser__copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae modi illo aut beatae repellat.</p>
		</div>
	{{/if }}

	{{#if teaserContentWrapped }}
		<div class="teaser__body">
			<span class="text-base">Cross link teaser</span>
			<h3 class="teaser__title">will hidden/removed on smaller screens</h3>
			<p class="teaser__copy--dark">Hidden Classes are: "hide-lg" for breakpoint large (768 px), "hide-me" for breakpoint medium (600 px), "hide-sm" for breakpoint small (480 px).</p>
		</div>
	{{/if }}

	{{#if teaserHighlight }}
		<div class="teaser__body">
			{{#if teaserIntro }}
				<span class="text-base">Intro</span>
			{{/if }}
			<h3 class="teaser__title h2 {{ highlightColor }}">context related teaser will stay for all views/break points (e.g. key fact teaser, author/expert teaser)</h3>
			{{ render "molecules/components/social-share" twitter-button=true theme-dark=true text="context related teaser will stay for all views/break points (e.g. key fact teaser, author/expert teaser)" }}
		</div>
	{{/if }}

	{{#if teaserMediaHighlight }}
		<div class="teaser__body">
			<p class="teaser__title">context related teaser will stay for all views/break points (e.g. key fact teaser, author/expert teaser)</p>
		</div>
	{{/if }}

	<div class="aux-pos-bt">
		{{#if social-share }}
			{{ render "molecules/components/social-share" default=true leftIcon=true noText=true teaser=false noMargin=true }}
		{{/if }}

		{{#if iconArrow }}
			<i class="icons-arrow-right decorator"></i>
		{{/if }}
	</div>
{{#if iconArrow }}
</a>
{{else }}
</div>
{{/if }}
