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">
        <div class="listing-card--details listing-card--details__theatre 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__theatre me-auto">Theatre</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>
                            <span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
                        </div>
                    </div>
                </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--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;
      }
    }
  }
}
  • URL: /components/raw/search-row/search-row.scss
  • Filesystem Path: src/components/02-structures/search/search-row/search-row.scss
  • Size: 668 Bytes

No notes defined.