England Football

Membership Carousel 

<section class="container membership-carousel">
    <h2 class="heading-section ">Exclusive Partner Offers</h2>
    <div class="container__content">
        <div class="carousel-container">
            <div class="carousel" data-behavior="carousel-glide">
                <div data-glide-el="track">
                    <ul class="glide__slides">
                        <li><a target="_blank" href="/" class="content-card ">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">Title</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><a target="_blank" href="/" class="content-card content-card--article">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">head &amp; shoulders present: Jack grealish, The heard yeards</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><a target="_blank" href="/" class="content-card content-card--article">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">head &amp; shoulders present: Jack grealish, The heard yeards</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><a target="_blank" href="/" class="content-card content-card--article">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">head &amp; shoulders present: Jack grealish, The heard yeards</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><a target="_blank" href="/" class="content-card content-card--article">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">head &amp; shoulders present: Jack grealish, The heard yeards</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li><a target="_blank" href="/" class="content-card content-card--article">
                                <div class="content-card__image-bg">
                                    <img src="/assets/example-content/article-card-image.png" />
                                </div>
                                <div class="content-card__content">
                                    <div class="content-card__content--dark-gradient">
                                    </div>
                                    <div class="content-card__content--info">
                                        <div class="sponsored-label">Men's Senior</div>
                                        <p class="title">head &amp; shoulders present: Jack grealish, The heard yeards</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="carousel-nav-block">
                    <div class="carousel-nav-wrapper">
                        <div class="carousel-navigation" data-glide-el="controls">
                            <button aria-label="Previous" class="carousel__cta carousel__prev"><span class="visually-hidden">Previous
                                    page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
                                    <path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
                                </svg></button>
                            <button aria-label="Next" class="carousel__cta carousel__next"><span class="visually-hidden">Next
                                    page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
                                    <path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
                                </svg></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

No notes defined.

{
  "heading": {
    "copy": "Exclusive Partner Offers"
  },
  "subtitle": {
    "copy": "Exclusive discounts and offers for members of the Pride",
    "additionalClasses": "container__subtitle"
  },
  "players": [
    {
      "title": "Title",
      "thumbnail": "/assets/example-content/article-card-image.png",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab non voluptas minima cupiditate odio",
      "duration": "3:30 min read",
      "date": "11 Oct 2020",
      "modifier": "",
      "sponsors-show": false
    },
    {
      "sponsors-show": false
    },
    {
      "sponsors-show": false
    },
    {
      "sponsors-show": false
    },
    {
      "sponsors-show": false
    },
    {
      "sponsors-show": false
    }
  ]
}
  • Content: 
    .membership-carousel {
  .container__subtitle {
    font: normal normal 2rem/3.2rem $text-font-ef;
    letter-spacing: 0.02em;
    color: $color-interface-light;
  }
  .heading-section {
    text-transform: uppercase;
    margin-bottom: 3.6rem;
  }
  .content-card {
    min-height: 37.5rem;
    &__content {
      .title {
        font-family: $text-font-ef;
        font-size: 1.6rem;
        line-height: 2.4rem;
        color: $blue;
        font-weight: 500;
      }
      &--info {
        padding: 1.2rem 1.6rem;
        border-radius: 0 0 0.4rem 0.4rem;
        .sponsored-label {
          font-family: $text-font-ef;
          font-size: 1.2rem;
          line-height: 1.2rem;
          color: $color-interface-light;
          margin-bottom: 0.8rem;
        }
      }
    }
  }

  @media screen and (min-width: 501px) and (max-width: 900px) {
    .carousel-container {
      max-width: 560px;
      margin: 0 auto;
    }
  }

  @media screen and (max-width: $mq-medium) {
    .container__subtitle {
      margin-top: 1.5rem;
      padding: 0 1.6rem;
    }
    .heading-section {
      font-size: 4rem;
      line-height: 4rem;
    }
    .content-card {
      flex-direction: column;
      max-width: 27.4rem;
      max-height: 37.5rem;
      padding-top: 0.3rem;
      transition: padding-top 0.5s ease-in-out;

      &__image-bg,
      &__image-bg img {
        max-width: 27.4rem;
        height: 24.4rem;
        max-height: 24.4rem;
        border-radius: 0.4rem 0.4rem 0 0;
        width: 100%;
      }

      &__content {
        max-width: 27.4rem;
        min-height: 14.9rem;
        border-top: 0;
        border: 1px solid $grey-light1;
        border-radius: 0 0 0.4rem 0.4rem;
        padding: 1.6rem 1.8rem 1.6rem 1.6rem;
        height: 14.9rem;

        .title {
          font-size: 1.4rem;
          line-height: 2rem;
        }

        .description {
          font: normal normal 1.4rem/2rem $text-font;
          margin-top: 1.6rem;
          margin-bottom: 4rem;
        }

        .dateduration-wrap {
          &::after {
            position: static;
          }
        }
        &--info {
          height: auto;
          padding: 0;
          border: 0;
        }
      }
    }
    .carousel__prev,
    .carousel__next {
      display: none;
    }
  }
}
:root [data-brand='womens'],
:root [data-brand='mens'] {
  @media screen and (max-width: $mq-medium) {
    .membership-carousel .heading-section {
      font-size: 50px;
      line-height: 38px;
    }
  }
}
  • URL: /components/raw/membership-carousel/membership-carousel.scss
  • Filesystem Path: src/library/modules/membership-carousel/membership-carousel.scss
  • Size: 2.5 KB 
<section class="container membership-carousel">
  {{render '@heading--section' heading merge=true}}
  <div class="container__content">
    <div class="carousel-container">
      <div class="carousel" data-behavior="carousel-glide">        
        <div data-glide-el="track">
          <ul class="glide__slides">
            {{#each players}}
            <li>{{render '@content-card' this merge="true"}}</li>
            {{/each}}
          </ul>
        </div>
        <div class="carousel-nav-block">
          <div class="carousel-nav-wrapper">
            <div class="carousel-navigation" data-glide-el="controls">
              <button aria-label="Previous" class="carousel__cta carousel__prev"><span
                  class="visually-hidden">Previous
                  page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z"
                    fill="currentColor" />
                </svg></button>
              <button aria-label="Next" class="carousel__cta carousel__next"><span
                  class="visually-hidden">Next
                  page</span><svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z"
                    fill="currentColor" />
                </svg></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>