<article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
<img class="w-100" src="/images/samples/show-image/santi-naz-portrait.jpg" alt="Example image">
</header>
<div class="listing-card--details listing-card--details__theatre border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Santi & Naz</h3>
<p class="mt-1 mx-2 flex-grow-1"><small>The Thelmas and The Pleasance, in association with Sarah Verghese Productions</small></p>
<p class="text-uppercase m-2 my-0">Edinburgh</p>
<p class="text-uppercase m-2 my-0">August (various)</p>
</div>
<a class="stretched-link" href="#">
Book tickets for Santi & Naz
</a>
</article>
{% if show_url %}
{% set classes = [
"listing-card",
"listing-card__show"
] %}
{% else %}
{% set classes = [
"listing-card",
"listing-card__cta"
] %}
{% endif %}
<article class="{{ classes|join(' ') }} position-relative flex-shrink-0 swiper-slide overflow-hidden">
<header class="listing-card--header">
{% if cta_url %}
<a href="{{ cta_url }}">
{% endif %}
{% block image %}
<img class="w-100" src="{{ image }}" alt="Example image">
{% endblock %}
{% if cta_url %}
</a>
{% endif %}
</header>
{% if show_url %}
<div class="listing-card--details listing-card--details__{{ genre_class ?: genre|lower }} border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
{% if genre %}
<mark class="lozenge lozenge--programme lozenge--programme__{{ genre_class ?: genre|lower }} me-auto">{{ genre }}</mark>
{% endif %}
{% if title %}
<h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">{{ title }}</h3>
{% endif %}
{% if company %}
<p class="mt-1 mx-2 flex-grow-1"><small>{{ company }}</small></p>
{% endif %}
{% if festival %}
<p class="text-uppercase m-2 my-0">{{ festival }}</p>
{% endif %}
{% if dateline %}
<p class="text-uppercase m-2 my-0">{{ dateline }}</p>
{% endif %}
</div>
<a class="stretched-link" href="{{ show_url }}">
Book tickets for {{ title }}
</a>
{% endif %}
</article>
{
"title": "Santi & Naz",
"company": "The Thelmas and The Pleasance, in association with Sarah Verghese Productions",
"image": "/images/samples/show-image/santi-naz-portrait.jpg",
"show_url": "#",
"genre": "Theatre",
"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.