<article class="card-dossier">
<a href="" aria-label="10 conseils d'hygiène en été pour votre chien">
<div class="card-dossier__thumbnail">
<img src="https://source.unsplash.com/1600x900?dog" alt="" />
</div>
<div class="card-dossier__description">
<h4 class="alt--font">10 conseils d'hygiène en été pour votre chien</h4>
<span href="#" class="card-dossier__link">Lire le dossier</span>
</div>
</a>
</article>
<article class="card-dossier{{#if is_large }} card-dossier--large{{/if}}">
<a href="{{card_dossier.href}}" aria-label="{{card_dossier.title}}">
<div class="card-dossier__thumbnail">
<img src="{{card_dossier.thumbnail}}" alt="" />
</div>
<div class="card-dossier__description">
{{#if is_large}}
<span>Notre dossier du mois</span>
{{/if}}
<h4 class="alt--font">{{card_dossier.title}}</h4>
<span href="#" class="card-dossier__link">Lire le dossier</span>
</div>
</a>
</article>
{
"card_dossier": {
"thumbnail": "https://source.unsplash.com/1600x900?dog",
"title": "10 conseils d'hygiène en été pour votre chien"
}
}
.card-dossier {
> a {
display: block;
background: $c-brown-dark;
border-radius: $border-radius-s;
overflow: hidden;
text-decoration: none;
&:hover, &:focus {
box-shadow: $box-shadow-xs;
transform: translateY(-10px);
.card-dossier__link {
text-decoration-color: $c-brown-dark;
}
}
}
&__thumbnail {
position: relative;
height: 0;
padding-top: 56.25%;
> img {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 6px);
height: 100%;
object-fit: cover;
}
}
&__description {
padding: $margin-m;
> span {
color: $c-orange;
font-size: rem(18);
}
> h4 {
margin: 0 0 $margin-l;
color: $c-white;
font-size: rem(24);
}
.card-dossier__link {
font-size: rem(18px);
text-decoration: underline;
text-decoration-color: $c-white;
color: $c-white;
transition: .3s ease;
}
}
&--large {
@include mediaWQuery($media-query-m) {
> a {
@supports (display: flex) {
display: flex;
align-items: stretch;
}
min-height: 330px;
h4 { font-size: rem(32) }
}
.card-dossier__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-dossier__description {
display: flex;
flex-direction: column;
height: auto;
padding: $margin-l*1.5 $margin-l;
width: 50%;
> p { margin-bottom: 0 }
.card-dossier__link {
justify-self: flex-end;
margin-top: auto;
}
}
}
}
}
There are no notes for this item.