Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="o-grid9 row">
<div class="o-grid9__column col-md-12 col-lg-8 jq_grid9">
<div class="o-grid9__inner">
<div class="o-grid9__tags">
<a href="#" target="_self" class="a-button">Detail</a>
</div>
<div class="o-grid9__content">
<div class="o-grid9__background">
<p class="o-grid9__title" data-equal-group="heading1">
<a href="#" target="_self" class="text-underline-never">
<strong> Title 01 </strong>
</a>
</p>
<p class="o-grid9__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<a href="#" target="_self" class="o-grid9__thumb">
<img src="https://placehold.it/400x280/" srcset="https://placehold.it/400x280/ 1x, https://placehold.it/800x560/ 2x" loading="lazy" width="400" height="280" alt="Title 01" class="o-grid9__image">
</a>
</div>
</div>
<div class="o-grid9__column col-md-12 col-lg-8 jq_grid9">
<div class="o-grid9__inner">
<div class="o-grid9__tags">
<a href="#" target="_self" class="a-button">Detail</a>
</div>
<div class="o-grid9__content">
<div class="o-grid9__background">
<p class="o-grid9__title" data-equal-group="heading1">
<a href="#" target="_self" class="text-underline-never">
<strong> Lorem ipsum dolor sit amet lorem ipsum dolor sit amet </strong>
</a>
</p>
<p class="o-grid9__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. </p>
</div>
</div>
<a href="#" target="_self" class="o-grid9__thumb">
<img src="https://placehold.it/400x280/" srcset="https://placehold.it/400x280/ 1x, https://placehold.it/800x560/ 2x" loading="lazy" width="400" height="280" alt="Lorem ipsum dolor sit amet lorem ipsum dolor sit amet" class="o-grid9__image">
</a>
</div>
</div>
<div class="o-grid9__column col-md-12 col-lg-8 jq_grid9">
<div class="o-grid9__inner">
<div class="o-grid9__tags">
<a href="#" target="_self" class="a-button">Detail</a>
</div>
<div class="o-grid9__content">
<div class="o-grid9__background">
<p class="o-grid9__title" data-equal-group="heading1">
<a href="#" target="_self" class="text-underline-never">
<strong> Title 01 </strong>
</a>
</p>
<p class="o-grid9__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
<a href="#" target="_self" class="o-grid9__thumb">
<img src="https://placehold.it/400x280/" srcset="https://placehold.it/400x280/ 1x, https://placehold.it/800x560/ 2x" loading="lazy" width="400" height="280" alt="Title 01" class="o-grid9__image">
</a>
</div>
</div>
</div>@import "atoms/button/index";
.o-grid9 {
$self: &;
&__column {
display: flex;
@at-root {
// sass-lint:disable-all
_:-ms-fullscreen, :root & { // MSIE 11 selector hack
&[style^="height"] {
#{$self}__content {
flex: 1 0 100%;
}
}
}
// sass-lint:enable-all
}
}
&__inner {
display: flex;
flex: 1 0 100%;
flex-direction: column-reverse;
max-width: 100%;
overflow: hidden;
padding: 0 space(2);
position: relative;
text-align: center;
&:link {
@include text-underline(none);
}
&:hover {
@media(min-width: breakpoint-min(md)) {
.js & #{$self}__tags {
max-height: 300px;
}
}
}
}
&__tags {
background: color('white');
flex: 0 0 auto;
margin-top: auto;
@media(min-width: breakpoint-min(md)) {
.js & {
max-height: 0;
transition: max-height .3s;
}
}
> * {
margin: 0 space(2) space(2);
}
}
&__content {
display: flex;
flex: 0 0 auto;
flex-direction: column;
position: relative;
z-index: 1;
@media(min-width: breakpoint-min(md)) {
flex: 0 0 100%;
&:before {
content: '';
display: block;
flex: 0 0 auto;
padding-bottom: 70%;
}
@at-root {
// sass-lint:disable-all
_:-ms-fullscreen, :root & { // MSIE 11 selector hack
flex: 1 0 auto;
}
// sass-lint:enable-all
}
}
}
&__title {
margin-bottom: 0;
margin-top: 0;
}
&__thumb {
display: block;
@media(min-width: breakpoint-min(md)) {
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
}
&__background {
background: color('white');
flex: 1 0 auto;
padding: space(2);
}
}import $ from 'jquery';
export default class Grid9 {
constructor() {
if (this.test()) {
$.each($.mq.getBreakpoints(), (breakpoint) => {
if (breakpoint === 'menu') {
return;
}
$.mq.action(breakpoint, () => {
$('.jq_grid9').removeAttr('style').each(function() {
let height = $(this).height();
if (height > 0) {
$(this).height(height);
}
});
}, false);
});
}
}
test() {
return typeof $.mq !== 'undefined' &&
!$('html').hasClass('touch') &&
$('.jq_grid9').length ? true : false;
}
}
$(document).on('ready', () => new Grid9());
$(window).on('load', () => new Grid9());