Pleasance Styleguide

Search row: Performance (sold out) 

<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">
        <header class="listing-card--header flex-grow-0 d-none d-sm-block">
            <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
            <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                <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>
                    <span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
                </div>
            </div>
        </div>
    </article>
</div>
 
{% render "@search-row--performance" with {
  "genre": "Theatre",
  "sold_out": true
} %}
 
{
  "title": "An interesting information page relevant to your search terms"
}
  • Content: 
    .search-row {
  width: 100%;
  height: 100%;
  background-color: transparent;

  @include media-breakpoint-up(sm) {
    width: 100%;
    height: auto;
  }

  &.listing-card {
    &__performance {
      .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;
      }
    }
  }
}
  • URL: /components/raw/search-row/search-row.scss
  • Filesystem Path: src/components/02-structures/search/search-row/search-row.scss
  • Size: 522 Bytes

No notes defined.