Pleasance Styleguide

Performance List Item 

<tr class="performance-list--item d-flex flex-wrap">
    <td class="performance-list--item-date px-4 py-2"><span class="fw-bold align-middle">15 Aug</span></td>
    <td class="performance-list--item-time px-4 py-2"><span class="fw-bold align-middle">12:34</span></td>
    <td class="performance-list--item-title px-4 py-2 flex-grow-1">
        Performance title
    </td>
    <td class="performance-list--item-price px-4 py-2"><span class="fw-bold align-middle">£12.34</span></td>
    <td class="performance-list--item-actions px-4 py-2 flex-shrink-0">
        <a href="#" class="btn btn-primary align-middle">Tickets</a>
    </td>
</tr>
 
<tr class="performance-list--item d-flex flex-wrap">
  <td class="performance-list--item-date px-4 py-2"><span class="fw-bold align-middle">{{ date_time|date("j M") }}</span></td>
  <td class="performance-list--item-time px-4 py-2"><span class="fw-bold align-middle">{{ date_time|date("H:i") }}</span></td>
  <td class="performance-list--item-title px-4 py-2 flex-grow-1">
    {% if title is not empty %}
      {{ title }}
    {% elseif access_tags is not empty %}
      {% for tag in access_tags %}
        {% render "@performance-access-tag" with { label: tag.label, title: tag.title } %}
      {% endfor %}
    {% endif %}
  </td>
  <td class="performance-list--item-price px-4 py-2"><span class="fw-bold align-middle">£{{ price|number_format(2) }}</span></td>
  <td class="performance-list--item-actions px-4 py-2 flex-shrink-0">
    {% if sold_out is not defined or not sold_out %}
      <a href="#" class="btn btn-primary align-middle">Tickets</a>
    {% else %}
      <span class="text-uppercase fs-6 d-inline-block align-middle">Sold out</span>
    {% endif %}
  </td>
</tr>
 
{
  "date_time": "2026-08-15 12:34",
  "title": "Performance title",
  "price": 12.34,
  "sold_out": false
}
  • Content: 
    .performance-list {
  &--item {
    &-date,
    &-time {
      min-width: 7rem;
    }

    &-title {
      width: 100%;

      @include media-breakpoint-up(lg) {
        width: auto;
      }
    }

    &-price {
      width: 50%;
      
      @include media-breakpoint-up(lg) {
        width: auto;
        min-width: 7rem;
      }
    }

    &-actions {
      width: 50%;

      &, span {
        text-align: right;
      }

      @include media-breakpoint-up(lg) {
        width: auto;
        min-width: 9rem;
        text-align: left;

        span {
          text-align: center;
        }
      }
    }

    &:nth-of-type(odd) {
      background-color: var(--bs-table-striped-bg);
    }
  }
}
  • URL: /components/raw/performance-list-item/_performance-list-item.scss
  • Filesystem Path: src/components/02-structures/show-page/_performance-list-item/_performance-list-item.scss
  • Size: 698 Bytes

No notes defined.