<article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<a href="#">
<img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
</a>
</header>
</article>
{% render "@listing-card" with {
"cta_url": "#",
"show_url": null,
"image": "/images/samples/custom-cta.png"
} %}
{
"title": "Michael McIntyre's Big World Tour",
"company": "Michael McIntyre's Big World Tour",
"image": "/images/samples/show-image/macintyre-small-portrait.png",
"show_url": "#",
"genre": "Comedy",
"festival": "Edinburgh",
"dateline": "August (various)"
}
.listing-card {
width: 260px;
height: 520px;
background-color: $gray-200;
&--details {
border-top-left-radius: 0.6rem;
border-top-right-radius: 0.5rem;
min-height: 10.5rem;
@each $name, $hex in $genre-colours {
&__#{$name} {
border-color: $hex !important;
}
}
}
}
No notes defined.