<div class="grid__column" data-gridspan="">
    <div class="block ">
        <div class="block__content">
            <h1 class="block__title">Item title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="link " href="#">Read More</a>
        </div>

    </div>
</div>
<div class="grid__column"  data-gridspan="{{#if size}}{{size}}{{/if}}">
	<div class="block {{#if extraClass}}{{extraClass}}{{/if}}">
		{{#if image}}
		<img class="block__source" src="{{image}}" alt="">
		{{/if}} 
		<div class="block__content">
			{{#if hType}}
				<{{hType}} class="{{#if hClass}}{{hClass}}{{else}}block__title{{/if}}">{{hText}}</{{hType}}>  
			{{/if}}
			{{#if subTitle}}
				<h3 class="block__sub-title">{{subTitle}}</h3>  
			{{/if}}
			{{#if content}} 
				<p>{{content}}</p> 
			{{else}}
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			{{/if}}
			{{#if cta}} 
			 	<a class="link {{#if type}}{{type}}{{/if}}" href="#">{{cta}}</a>
			{{/if}}		
		</div>
		{{#if blockImg}} <img src="{{blockImg}}" class="block__source--block" alt="">{{/if}}
	</div>
</div>
{
    "hText": "Item title",
    "hType": "h1",
    "cta": "Read More",
    "ctaType": "btn btn--primary"
}
// .block {
// 	background-color: $white;
// 	margin-bottom: 1em;
// 	flex: 1 1 auto;
// 	position: relative;
// 	overflow: hidden;
// }
// .block__content {
// 	padding: 1em;
// 	background-color: $white
// }
// .block__content--dark {
// 	background-color: $grey--superdark;
// 	color: $white;
// }
// .block__content--with-right-slant {
// 	position: relative;
// 	z-index: 1;
// 	&:after {
//         content: " ";
//         position: absolute;
//         right: -200px;
//         bottom: 50%;
//         width: 0;
//         height: 0;
//         border-style: solid;
//         border-width: 500px 0 0 500px;
//         border-color: transparent transparent transparent $grey--superdark
//     }
// 	&:before {
// 	 	width: 0;
// 		height: 0;
// 		border-style: solid;
// 		border-width: 500px 500px 0 0;
// 		border-color: $grey--superdark transparent transparent transparent;
// 	    content: " ";
//         position: absolute;
//         right: -200px;
//         top: 50%;
// 	}
//     &:before, &:after {
//     	z-index: -1;
//   	}
// }
// .block__content--with-left-slant {
// 	position: relative;
// 	z-index: 1;
// 	&:after {
//         content: " ";
//         position: absolute;
//         left: -200px;
//         bottom: 50%;
//         width: 0;
//         height: 0;
//         border-style: solid;
//         border-width: 0 0 500px 500px;
//         border-color: transparent transparent $grey--superdark transparent;
//     }
// 	&:before {
// 	 	width: 0;
// 		height: 0;
// 		border-style: solid;
// 		border-width: 0 500px 500px 0;
// 		border-color:  transparent $grey--superdark transparent transparent;
// 	    content: " ";
//         position: absolute;
//         left: -200px;
//         top: 50%;
// 	}
//     &:before, &:after {
//     	z-index: -1;
//   	}
// }

// .block__source--fullspan {
// 	position: absolute;
// 	left: 0;
// }

.block {
	background: $white;
	padding: 1em;
	margin-bottom: 1em;
	flex: 1 1 auto;
	@include mq($from: med){
	}
}
.block--light-gray {
	background: $grey--superlight;
}
.block--no-padding {
	padding: 0;
}
.block--orange {
	.block__title {
		color: $brand--prime;
	}
}
.block__title {
	margin-bottom: 1em;
}
.block__title + .block__sub-title {
	margin-bottom: 1em;
	margin-top: -0.75em;
}
.block__source {
	display: inline-block;
	vertical-align: top;
	padding-right: 1em;
	max-width: 100%;
	@include mq($from: small) {
		width: 49%;
	}
	
}
.block__source--block {
		width: 100%;
		display: block;
	@include mq($from: small) {
		position: absolute;
		right: 0;
		top:0;
		left:0;
	}
}
.block__source + .block__content {
	display: inline-block;
	vertical-align: top;
	@include mq($from: small) {
		width: 49%;
	}
}
.block--full-img {
	overflow: hidden;
}
.block--banner-img {
	padding: 0;
	.block__content{
		padding: 1em;
	}
}
.block__source--banner {
	margin-bottom: 1em;
}
.block--decorated {
	position: relative;
	.block__content {
		position: relative;
		padding: 1em;
		z-index: 1;
		background-color: lighten($black--off,5%);
		color: $white;
		@include mq($from: med) {
		 &:after {
		 	    content: '';
			    position: absolute;
			    left: 100%;
			    top: 0;
			    bottom: 0;
			    background: url(/assets/icons/r_arrow.svg)no-repeat top right;
			    background-size: auto 100%;
			    height: 100%;
			    background-position: 0 0;
			    width: 500px;
		 	}
		}
	}
	.link {
		color:$white;
	}
}

//used on content page

.block--img-overflow {
	padding: 0;
	overflow: hidden;
}
.block__source--oveflow {
	@include mq($until: small) {
		max-width: 100%;
		height: auto;
	}
	display: block;
	@include mq($from: small) {
		position: absolute;
		&.block__source--oveflow-left {
			margin-left: -50%;
		}
		&.block__source--oveflow-right {
			margin-right: -50%;
		}
		
	}
}
.block__content-container {
	.block__content {
		padding: 1em;
	}
	@include mq($from: small) {
		background: $white;
	}
}

There are no notes for this item.