Pleasance Styleguide

Carousel: Custom carousel 

<div class="carousel swiper position-relative">
    <h2 class="text-uppercase fw-bolder fs-3"><a href="#" class="chevron">Custom carousel</a></h2>
    <div class="carousel--items swiper-wrapper">
        <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>
        <article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
            <header class="listing-card--header">
                <a href="#">
                    <img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
                </a>
            </header>
        </article>
        <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/half-moon-portrait.jpg" alt="Example image">
            </header>
            <div class="listing-card--details listing-card--details__theatre 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__theatre me-auto">Theatre</mark>
                <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">The Half Moon</h3>
                <p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</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 The Half Moon
            </a>
        </article>
        <article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
            <header class="listing-card--header">
                <a href="#">
                    <img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
                </a>
            </header>
        </article>
        <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/santi-naz-portrait.jpg" alt="Example image">
            </header>
            <div class="listing-card--details listing-card--details__theatre 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__theatre me-auto">Theatre</mark>
                <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Santi & Naz</h3>
                <p class="mt-1 mx-2 flex-grow-1"><small>The Thelmas and The Pleasance, in association with Sarah Verghese Productions</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 Santi & Naz
            </a>
        </article>
        <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>
        <article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
            <header class="listing-card--header">
                <a href="#">
                    <img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
                </a>
            </header>
        </article>
        <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/henry-normal-portrait.jpg" alt="Example image">
            </header>
            <div class="listing-card--details listing-card--details__theatre 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__theatre me-auto">Theatre</mark>
                <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Edge Street Live presents Henry Normal & Nigel Planer</h3>
                <p class="mt-1 mx-2 flex-grow-1"><small>Alice Malseed & Emily Foran, Lyric Belfast, Pleasance, Thistle and Rose Arts</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 Edge Street Live presents Henry Normal & Nigel Planer
            </a>
        </article>
        <article class="listing-card listing-card__cta position-relative flex-shrink-0 swiper-slide overflow-hidden">
            <header class="listing-card--header">
                <a href="#">
                    <img class="w-100" src="/images/samples/custom-cta.png" alt="Example image">
                </a>
            </header>
        </article>
        <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>
    </div>
    <span class="carousel--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next carousel slide">&gt;</span>
</div>
 
<div class="carousel swiper position-relative">
  <h2 class="text-uppercase fw-bolder fs-3"><a href="#" class="chevron">{{ heading }}</a></h2>
  <div class="carousel--items swiper-wrapper">
    {% for item in items  %}
    {% render "@" ~ item %}
    {% endfor %}
  </div>
  <span class="carousel--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next carousel slide">&gt;</span>
</div>
 
{
  "heading": "Custom carousel",
  "items": [
    "listing-card",
    "listing-card--custom-cta",
    "listing-card--theatre",
    "listing-card--custom-cta",
    "listing-card--theatre-alt",
    "listing-card",
    "listing-card--custom-cta",
    "listing-card--theatre-long",
    "listing-card--custom-cta",
    "listing-card"
  ]
}
  • Content: 
    .carousel {
  @include media-breakpoint-down(sm) {
    margin-right: -1rem;
  }

  &--next {
    display: none;

    @include media-breakpoint-up(sm) {
      display: flex;
      top: 0;
      right: 0;
      bottom: 0;
      width: 2rem;
      background: rgba(white, 0.8);
      z-index: 1;
    }
  }
}
  • URL: /components/raw/carousel/carousel.scss
  • Filesystem Path: src/components/02-structures/carousel/carousel.scss
  • Size: 304 Bytes

No notes defined.