<div class="o-grid8">
<div class="o-grid8__column">
<div class="o-grid8__item o-grid8__item--feature">
<div class="o-grid8__thumb">
<div class="o-grid8__thumb__file a-background a-background--cover">
<img src="https://placehold.it/600x600/" loading="lazy" width="600" height="600" alt="Title field needs">
</div>
</div>
<div class="o-grid8__content">
<h3 class="o-grid8__title"> Title field needs 'truncate' latte filter 80 and 40 characters length </h3>
<p class="o-grid8__perex"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. </p>
<div class="o-grid8__tags">
<span class="a-button">Detail</span>
</div>
</div>
<a href="#" target="_self" class="o-grid8__link"></a>
</div>
</div>
<div class="o-grid8__column">
<div class="o-grid8__item">
<div class="o-grid8__thumb">
<div class="o-grid8__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" loading="lazy" width="300" height="300" alt="Veniam, quis nostrud ut aliquip ex">
</div>
</div>
<div class="o-grid8__content">
<h3 class="o-grid8__title"> Veniam, quis nostrud ut aliquip ex… </h3>
<div class="o-grid8__tags">
<span class="a-button">Detail</span>
</div>
</div>
<div class="o-grid8__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid8__link"></a>
</div>
<div class="o-grid8__item">
<div class="o-grid8__thumb">
<div class="o-grid8__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" loading="lazy" width="300" height="300" alt="Ut enim ad minim veniam">
</div>
</div>
<div class="o-grid8__content">
<h3 class="o-grid8__title"> Ut enim ad minim veniam, quis… </h3>
<div class="o-grid8__tags">
<span class="a-button">Detail</span>
</div>
</div>
<div class="o-grid8__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid8__link"></a>
</div>
<div class="o-grid8__item">
<div class="o-grid8__thumb">
<div class="o-grid8__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" loading="lazy" width="300" height="300" alt="Sed do eiusmod tempor incididunt ">
</div>
</div>
<div class="o-grid8__content">
<h3 class="o-grid8__title"> Sed do eiusmod tempor incididunt </h3>
<div class="o-grid8__tags">
<span class="a-button">Detail</span>
</div>
</div>
<div class="o-grid8__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid8__link"></a>
</div>
<div class="o-grid8__cta">
<a href="#" class="a-button">All posts</a>
</div>
</div>
<div class="position-absolute w-100"></div>
</div>@import "atoms/background/index";
@import "atoms/button/index";
.o-grid8 {
$self: &;
$grid-gutter: $grid-gutter-width;
margin-left: -($grid-gutter / 2);
margin-right: -($grid-gutter / 2);
@media(min-width: breakpoint-min(lg)) {
display: flex;
}
&__thumb {
align-self: stretch;
background-color: color('gray-light');
flex: 0 0 33.333%;
max-width: 33.333%;
position: relative;
transition: $base-transition;
#{&} &__file {
background-position: center;
background-size: cover;
z-index: 1;
}
}
&__content {
flex: 0 0 66.667%;
max-width: 66.667%;
padding: space(2);
}
&__caret {
@include font-size(xx-large);
color: color('white');
flex: 0 0 33.333%;
max-width: 33.333%;
text-align: right;
transition: $base-transition;
}
&__title,
&__perex {
margin: 0 0 space(1);
transition: color $base-transition;
width: 100%;
}
&__link {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
&__column {
padding-left: ($grid-gutter / 2);
padding-right: ($grid-gutter / 2);
+ #{&} {
margin-top: $grid-gutter;
}
@media(min-width: breakpoint-min(lg)) {
display: flex;
flex: 1 0 0;
flex-direction: column;
max-width: 100%;
+ #{&} {
flex-basis: 50%;
margin-top: 0;
max-width: 50%;
}
}
}
&__item {
align-items: center;
background: color('white');
border: 1px solid color('gray-light');
display: flex;
flex-wrap: nowrap;
margin-bottom: $grid-gutter;
overflow: hidden;
position: relative;
z-index: 0;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: color('gray-dark');
#{$self}__title,
#{$self}__perex {
color: color('white');
> * {
color: inherit;
}
}
&:not(#{$self}__item--feature) {
&:not(#{$self}__item--single) {
#{$self}__thumb {
margin-left: -33.333%;
}
}
}
}
&--single {
display: block;
#{$self}__thumb,
#{$self}__content {
max-width: 100%;
width: 100%;
}
#{$self}__thumb {
padding-top: 56.25%;
}
@media(min-width: breakpoint-min(lg)) {
display: flex;
#{$self}__thumb,
#{$self}__content {
flex: 0 0 50%;
max-width: 50%;
width: 50%;
}
#{$self}__thumb {
padding-top: 0;
}
}
}
&--feature {
flex-wrap: wrap;
padding-top: 56.25%;
align-items: stretch;
#{$self}__content {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
#{$self}__thumb {
max-width: 100%;
padding-top: inherit;
position: absolute;
top: 0;
width: 100%;
}
@media(min-width: breakpoint-min(lg)) {
flex-direction: column;
flex-grow: 1;
#{$self}__content {
align-items: stretch;
display: flex;
flex-direction: column;
flex-grow: 1;
flex: 1 0 auto;
}
}
}
}
&__tags {
margin-top: auto;
}
&__cta {
text-align: center;
@media(min-width: breakpoint-min(lg)) {
margin-top: auto;
text-align: left;
}
}
}