<div class="supt-card-news">
<div class="supt-card-news__head supt-parallax-image">
<div class="supt-card-news__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-text.webp" alt="Proud to serve with excellence">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#consumer-trend-report-2025">Consumer trend report 2025</a>
</h3>
<p>Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.</p>
</div>
<div class="supt-post-metas">
<div class="supt-tag">
<span class="supt-tag__label">News</span>
</div>
<svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
</svg> <time itemprop="datePublished" datetime="2025-02-16T00:00:00+00:00">February 16, 2025</time>
</div>
</div>
No notes defined.
<div class="supt-card-news">
<div class="supt-card-news__head supt-parallax-image">
<div class="supt-card-news__head__inner supt-parallax-image__image">
<img src="{{ path(image.src) }}" alt="{{ image.alt }}">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="{{link.href}}">{{ title }}</a>
</h3>
<p>{{ description }}</p>
</div>
{% include "atoms/post-metas/post-metas.twig" with {
"tag": {label: "News"},
"date": date
} only %}
</div>
/* No context defined. */
.supt-card-news {
@mixin card-hover .supt-card-news;
display: flex;
flex-direction: column;
gap: $spacing-4;
@media (min-width: $breakpoint-md) {
gap: $spacing-6;
}
&__head {
aspect-ratio: 4 / 3;
overflow: hidden;
&__inner {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
&__body {
@mixin clamp gap, $spacing-1-5, $spacing-3, $breakpoint-xs, $breakpoint-xl;
display: flex;
flex-direction: column;
padding-right: $spacing-6;
h2,
h3,
h4 {
@extend %t-h4;
margin-bottom: 0;
a {
outline: none;
transition: color $transition-fast;
}
}
p {
@extend %t-body-s;
color: $color-grey-5;
}
}
}