<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)"
}
  • 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

No notes defined.