Pleasance Styleguide

Listing card: Show (comedy) 

<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/macintyre-small-portrait.png" alt="Example image">
      </header>
      <div class="listing-card--details listing-card--details__comedy 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__comedy me-auto">Comedy</mark>
          <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
          <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</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 Michael McIntyre's Big World Tour
      </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": "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.