<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#" class="chevron">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
{% set classes = [
"listing-card",
"listing-card__performance"
] %}
<article class="{{ classes|join(' ') }} search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__{{ genre_class ?: genre|lower }} border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
{% if genre %}
<mark class="lozenge lozenge--programme lozenge--programme__{{ genre_class ?: genre|lower }} me-auto">{{ genre }}</mark>
{% endif %}
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
{% block image %}
<a href="{{ show_url }}">
<img class="img-fluid" src="{{ image }}" alt="Example image">
</a>
{% endblock %}
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
{% if show_title %}
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="{{ show_url }}" class="chevron">{{ show_title }}</a>
</h3>
{% endif %}
{% if time %}
<p class="fw-bolder m-2 mx-sm-3 my-0">{{ time }}</p>
{% endif %}
{% if venue %}
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">{{ venue }}</p>
{% endif %}
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
{% if title is not empty or access_tags is not empty %}
<p class="fw-bolder m-2 mx-sm-3 my-0">
{% if title is not empty %}
<span{% if access_tags is not empty %} class="pe-2"{% endif %}>{{ title }}</span>
{% endif %}
{% if access_tags is not empty %}
{% for tag in access_tags %}
{% render "@performance-access-tag" with { label: tag.label, title: tag.title } %}
{% endfor %}
{% endif %}
</p>
{% endif %}
</div>
<div>
{% if not sold_out %}
<a href="{{ tickets_url }}" class="btn btn-primary align-self-end mx-2">Tickets</a>
{% else %}
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</article>
</div>
{
"title": "Relaxed Performance",
"genre": "Comedy",
"image": "/images/samples/show-image/macintyre-small-portrait.png",
"show_title": "Example Show Title",
"time": "12:30",
"venue": "Courtyard - Beside",
"access_tags": [
{
"label": "AD",
"title": "Audio-Described"
},
{
"label": "CAP",
"title": "Captioned"
},
{
"label": "CHILL",
"title": "Chilled"
},
{
"label": "REL",
"title": "Relaxed"
},
{
"label": "BSL",
"title": "Signed (Interpreted)"
},
{
"label": "TT",
"title": "Touch Tour"
}
],
"show_url": "#",
"tickets_url": "#",
"sold_out": false
}
.search-row {
width: 100%;
height: 100%;
background-color: transparent;
@include media-breakpoint-up(sm) {
width: 100%;
height: auto;
}
&.listing-card {
&__performance {
.listing-card--header {
max-width: 8rem;
@include media-breakpoint-up(sm) {
max-width: 10rem;
}
}
.listing-card--details {
position: relative;
}
}
}
.listing-card {
&--header {
@include media-breakpoint-up(sm) {
max-width: 10rem;
}
}
&--details {
position: absolute;
@include media-breakpoint-up(sm) {
position: relative;
}
}
}
}
No notes defined.