<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)"
}
  • Content:
    .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;
          }
        }
      }
    }
  • URL: /components/raw/listing-card/listing-card.scss
  • Filesystem Path: src/components/02-structures/listing-card/listing-card.scss
  • Size: 316 Bytes
  • Handle: @listing-card--theatre-alt
  • Preview:
  • Filesystem Path: src/components/02-structures/listing-card/listing-card.html.twig

No notes defined.