<div class="efl-search-card">
<div class="efl-search-card__image">
<img src=/assets/example-content/news-vertical-1.jpg />
</div>
<div class="efl-search-card__content">
<p class="efl-search-card__category">SESSION CAT</p>
<h5 class="efl-heading-5 efl-search-card__title">Lorem ipsum dolor sit amet, cumconsectetur adipiscing elit...</h5>
<p class="efl-p-1 efl-search-card__description">Lorem ipsum dolor sit amet, consectetur aLorem ipsum dolor sit amet, consectetur adipiscing...</p>
<p class="efl-search-card__date-wrap">
10 min read – 10 Mar 2022
</p>
</div>
</div>
No notes defined.
{
"category": "SESSION CAT",
"title": "Lorem ipsum dolor sit amet, cumconsectetur adipiscing elit...",
"description": "Lorem ipsum dolor sit amet, consectetur aLorem ipsum dolor sit amet, consectetur adipiscing...",
"img": "/assets/example-content/news-vertical-1.jpg",
"dateTime": true,
"time": "10 min",
"date": "10 Mar 2022"
}
.efl-search-card {
display: flex;
border-bottom: 0.1rem solid $light-blue;
padding: 1.6rem 0;
&__image {
flex-shrink: 0;
height: 11.8rem;
width: 10.4rem;
overflow: hidden;
background: url(./assets/images/new-card-placeholder-ef.jpg) no-repeat
center;
background-size: cover;
> img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
}
&__content {
margin: 0 1.6rem;
display: flex;
flex-direction: column;
row-gap: 0.4rem;
position: relative;
}
&__category {
font-family: var(--brand-text--font-family);
font-size: 1.2rem;
letter-spacing: 0.08em;
color: $bold-red;
text-transform: uppercase;
}
&__title {
color: $blue;
font-size: 1.6rem;
line-height: 2rem;
margin-bottom: 0.4rem;
@include text-limit(2);
}
&__description {
color: $color-interface-light;
font-size: 1.4rem;
line-height: 1.8rem;
@include text-limit(2);
}
&__date-wrap {
font-family: $text-font-ef;
color: $color-interface-light;
font-size: 1.2rem;
line-height: 1.2rem;
letter-spacing: -0.01em;
margin-top: 1rem;
position: absolute;
bottom: 0;
@include text-limit(1);
}
&:hover {
.efl-search-card__image {
> img {
transform: scale(1.1);
}
}
}
@media screen and (min-width: $mq-medium) {
flex-direction: column;
min-height: 41.4rem;
padding-bottom: 0;
border-bottom: 0;
&__image {
height: 18.3rem;
width: unset;
overflow: hidden;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__content {
row-gap: 0.8rem;
margin: 1.6rem 0;
margin-bottom: 0;
min-height: 19.8rem;
}
&__title {
font-family: $ef-font;
font-size: 2.2rem;
line-height: 2.4rem;
}
&__description {
@include text-limit(3);
font-family: $ef-font;
font-size: 1.8rem;
line-height: 2.4rem;
min-height: 7.2rem;
}
&__date-wrap {
position: absolute;
bottom: 1rem;
}
}
}
<div class="efl-search-card">
<div class="efl-search-card__image">
<img src={{img}} />
</div>
<div class="efl-search-card__content">
<p class="efl-search-card__category">{{category}}</p>
<h5 class="efl-heading-5 efl-search-card__title">{{title}}</h5>
<p class="efl-p-1 efl-search-card__description">{{description}}</p>
{{#if dateTime}}
<p class="efl-search-card__date-wrap">
{{time}} read – {{#if extraInfo}}{{extraInfo}}{{else}}{{date}}{{/if}}
</p>
{{/if}}
</div>
</div>