<article class="card card-news">
<a href="" aria-label="[JMT Beaucouzé] Rendez-vous samedi 5 octobre pour une journée spéciale animation :-)">
<div class="card-news__thumbnail">
<img src="https://source.unsplash.com/1600x900" alt="" />
</div>
<div class="card-news__description">
<time datetime="2019/09/09">Lundi 09 septembre</time>
<h4 class="alt--font">[JMT Beaucouzé] Rendez-vous samedi 5 octobre pour une journée spéciale animation :-)</h4>
<p>Samedi 5 octobre, profitez des animations et d'une remise de 10% sur toutes les ...</p>
</div>
</a>
</article>
<article class="card card-news{{#if is_large }} card-news--large{{/if}}">
<a href="{{card_news.href}}" aria-label="{{card_news.title}}">
<div class="card-news__thumbnail">
<img src="{{card_news.thumbnail}}" alt="" />
</div>
<div class="card-news__description">
<time datetime="{{card_news.datetime}}">{{card_news.date}}</time>
<h4 class="alt--font">{{card_news.title}}</h4>
<p>{{card_news.content}}</p>
</div>
</a>
</article>
{
"card_news": {
"thumbnail": "https://source.unsplash.com/1600x900",
"title": "[JMT Beaucouzé] Rendez-vous samedi 5 octobre pour une journée spéciale animation :-)",
"content": "Samedi 5 octobre, profitez des animations et d'une remise de 10% sur toutes les ...",
"date": "Lundi 09 septembre",
"datetime": "2019/09/09"
}
}
.card-news {
z-index: initial;
margin-bottom: 0;
width: 100%;
> a {
&:hover, &:focus {
box-shadow: $box-shadow-xs;
transform: translateY(-10px);
}
}
&__thumbnail {
position: relative;
height: 0;
padding-top: 56.25%;
width: calc(100% + 6px);
> img {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 6px);
height: 100%;
object-fit: cover;
}
}
&__description {
padding: $margin-m;
> time {
color: $c-red;
font-size: rem(18);
}
> h4 {
margin: 0 0 $margin-s;
color: $c-font-color;
font-size: rem(18);
}
> p {
color: $c-brown-light;
font-size: rem(18);
}
}
&--large {
@include mediaWQuery($media-query-m) {
> a {
@supports (display: flex) {
display: flex;
align-items: stretch;
}
h4 { font-size: rem(32) }
}
.card-news__thumbnail {
height: auto;
width: 50%;
padding-top: 0;
> img {
width: calc(100% - 3px);
height: calc(100% + 6px);
margin: -3px 0 -3px -3px;
border-radius: $border-radius-s 0 0 $border-radius-s;
}
}
.card-news__description {
display: flex;
flex-direction: column;
justify-content: center;
padding: $margin-l;
height: 100%;
min-height: 350px;
width: 50%;
align-self: center;
> p { margin-bottom: 0 }
}
}
}
@media screen and(min-width: $media-query-m) and(max-width: $media-query-l) {
&:first-child {
grid-column: span 2;
> a {
@supports (display: flex) {
display: flex;
align-items: stretch;
}
h4 { font-size: rem(32) }
}
.card-news__thumbnail {
height: auto;
width: 50%;
padding-top: 0;
> img {
width: calc(100% - 3px);
height: calc(100% + 6px);
margin: -3px 0 -3px -3px;
border-radius: $border-radius-s 0 0 $border-radius-s;
}
}
.card-news__description {
padding: $margin-l;
height: 100%;
width: 50%;
> p { margin-bottom: 0 }
}
}
}
}
There are no notes for this item.