Pleasance Styleguide

Performance List 

<div class="my-4">
    <h2 class="h3 text-center text-uppercase">Performances</h2>
    <p class="text-center">All orders will be subject to a handling fee of £1.50 per ticket, capped at £6. This will show as an 'Order Fee' at checkout.</p>
</div>
<div class="position-relative">
    <div class="performance-list--wrapper collapse" id="performance-list-wrapper">
        <table class="performance-list d-block table table-borderless table-striped fs-5">
            <thead class="d-none">
                <tr class="performance-list--headings">
                    <th>Date</th>
                    <th>Time</th>
                    <th>Information</th>
                    <th>Price</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody class="d-block container-fluid">
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        Preview
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        <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="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>
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <a href="#" class="btn btn-primary align-middle">Tickets</a>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <a href="#" class="btn btn-primary align-middle">Tickets</a>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <a href="#" class="btn btn-primary align-middle">Tickets</a>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        <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>
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <a href="#" class="btn btn-primary align-middle">Tickets</a>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        Royal Command Performance
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        <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>
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <a href="#" class="btn btn-primary align-middle">Tickets</a>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7 d-none d-lg-block">
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
                <tr class="performance-list--item row gx-3 border-2 border-bottom border-primary border-lg-none py-2 py-lg-0">
                    <td class="performance-list--item-date-time col-12 col-lg-2 d-flex gap-3 justify-content-start justify-content-lg-center">
                        <span class="fw-bold align-middle">15 Aug</span>
                        <span class="fw-bold align-middle">12:34</span>
                    </td>
                    <td class="performance-list--item-title col-12 col-lg-7">
                        <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>
                    </td>
                    <td class="performance-list--item-price col-8 col-md-10 col-lg-1 text-end">
                        <span class="fw-bold align-middle">£12.34</span>
                    </td>
                    <td class="performance-list--item-actions col-4 col-md-2 text-center">
                        <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="performance-list--toggle text-center d-block">
        <a class="btn btn-primary mt-4" data-bs-toggle="collapse" href="#performance-list-wrapper" role="button" aria-expanded="false" aria-controls="performance-list-wrapper">View all</a>
    </div>
</div>
 
<div class="my-4">
  <h2 class="h3 text-center text-uppercase">Performances</h2>
  <p class="text-center">All orders will be subject to a handling fee of £1.50 per ticket, capped at £6. This will show as an 'Order Fee' at checkout.</p>
</div>
<div class="position-relative">
  <div class="performance-list--wrapper collapse" id="performance-list-wrapper">
    <table class="performance-list d-block table table-borderless table-striped fs-5">
      <thead class="d-none">
        <tr class="performance-list--headings">
          <th>Date</th>
          <th>Time</th>
          <th>Information</th>
          <th>Price</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody class="d-block container-fluid">
        {% render "@performance-list-item" with {
          title: "Preview",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: "",
          access_tags: [
            { label: "AD", title: "Audio-Described" },
            { label: "CAP", title: "Captioned" },
            { label: "TT", title: "Touch Tour" }
          ]
        } %}
        {% render "@performance-list-item" with {
          title: "",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: "",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: ""
        } %}
        {% render "@performance-list-item" with {
          title: ""
        } %}
        {% render "@performance-list-item" with {
          title: "",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: "",
          access_tags: [
            { label: "AD", title: "Audio-Described" },
            { label: "CAP", title: "Captioned" },
            { label: "CHILL", title: "Chilled" },
            { label: "REL", title: "Relaxed" },
            { label: "BSL", title: "Signed (Interpreted)" },
            { label: "TT", title: "Touch Tour" }
          ]
        } %}
        {% render "@performance-list-item" with {
          title: "Royal Command Performance",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: "",
          access_tags: [
            { label: "AD", title: "Audio-Described" },
            { label: "CAP", title: "Captioned" },
            { label: "CHILL", title: "Chilled" },
          ]
        } %}
        {% render "@performance-list-item" with {
          title: "",
          sold_out: true
        } %}
        {% render "@performance-list-item" with {
          title: "",
          access_tags: [
            { label: "REL", title: "Relaxed" },
            { label: "BSL", title: "Signed (Interpreted)" },
            { label: "TT", title: "Touch Tour" }
          ],
          sold_out: true
        } %}
      </tbody>
    </table>
  </div>
  <div class="performance-list--toggle text-center d-block">
    <a class="btn btn-primary mt-4" data-bs-toggle="collapse" href="#performance-list-wrapper" role="button" aria-expanded="false" aria-controls="performance-list-wrapper">View all</a>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .performance-list {
  &--wrapper.collapse:not(.show) {
    display: block;
    height: 20rem !important;
    overflow: hidden;

    &::after {
      display: block;
      content: ' ';
      background: linear-gradient(rgba(255,255,255,0), white);
      position: absolute;
      width: 100%;
      height: 18rem;
      bottom: 3.5rem;
      left: 0;
      right: 0;
    }
  }

  &--wrapper.collapse.show,
  &--wrapper.collapsing {
    & + .performance-list--toggle {
      display: none !important;
    }
  }
}
  • URL: /components/raw/performance-list/performance-list.scss
  • Filesystem Path: src/components/02-structures/show-page/performance-list/performance-list.scss
  • Size: 512 Bytes

No notes defined.