England Football

Squad Players Announcement 

<div class="squad-players-announcement">
    <div class="carousel-container">
        <div class="carousel squad-player-section" data-behavior="carousel-glide">
            <div data-glide-el="track">
                <ul class="glide__slides">
                    <li>
                        <div class="squad-players">
                            <div class="squad-players__position">Goalkeepers</div>
                            <div class="squad-players__list">
                                <ul>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="squad-players">
                            <div class="squad-players__position">Defenders</div>
                            <div class="squad-players__list">
                                <ul>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="squad-players">
                            <div class="squad-players__position">Midfielders</div>
                            <div class="squad-players__list">
                                <ul>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="squad-players">
                            <div class="squad-players__position">Forwards</div>
                            <div class="squad-players__list">
                                <ul>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                    <a href="/">
                                        <li>
                                            <img src="/assets/example-content/player-stats-small-1.png" />
                                            <p>TRENT <span>Alexander-Arnold</span></p>
                                        </li>
                                    </a>
                                </ul>
                            </div>
                        </div>
                    </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>

    <hr>

    <div class="squad-players-announcement__squad-cta">
        <a href="/" class="cta cta--tertiary ">
            <p>CTA LINK</p>
        </a>

        <a href="/" class="cta cta--primary "><img src="/assets/example-content/cta-image.svg" alt="">
            <p>CTA LINK</p>
        </a>

        <a href="/" class="cta cta--secondary ">
            <p>CTA LINK</p>
        </a>

    </div>
</div>

No notes defined.

{
  "squad-role": [
    {
      "title": "Goalkeepers",
      "playerCard": [
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        }
      ]
    },
    {
      "title": "Defenders",
      "playerCard": [
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        }
      ]
    },
    {
      "title": "Midfielders",
      "playerCard": [
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        }
      ]
    },
    {
      "title": "Forwards",
      "playerCard": [
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        },
        {
          "href": "/",
          "image": "/assets/example-content/player-stats-small-1.png",
          "firstname": "TRENT",
          "lastname": "Alexander-Arnold"
        }
      ]
    }
  ],
  "cta": {
    "copy": "CTA LINK",
    "modifier": "tertiary"
  },
  "cta1": {
    "copy": "CTA LINK",
    "image": "/assets/example-content/cta-image.svg"
  },
  "cta2": {
    "copy": "CTA LINK",
    "modifier": "secondary"
  }
}
  • Content: 
    export default () => {
  const getSquadCta = document.querySelector(
    '.squad-players-announcement__squad-cta'
  );

  if (!getSquadCta) {
    return;
  }

  if (getSquadCta.childElementCount === 3) {
    getSquadCta.classList.add('three-squad-cta');
  } else if (getSquadCta.childElementCount === 2) {
    getSquadCta.classList.add('two-squad-cta');
  } else if (getSquadCta.childElementCount === 1) {
    getSquadCta.classList.add('one-squad-cta');
  }
};
  • URL: /components/raw/squad-players-announcement/squad-players-announcement.js
  • Filesystem Path: src/library/modules/squad-players-announcement/squad-players-announcement.js
  • Size: 461 Bytes
  • Content: 
    .squad-players-announcement {
  position: relative;

  .carousel-container {
    position: relative;
  }

  .carousel-nav-wrapper {
    position: initial;
  }

  .carousel__prev {
    position: absolute;
    left: 0;
    top: 45%;
    border: 1px solid transparent !important;
  }

  .carousel__next {
    position: absolute;
    right: 0;
    top: 45%;
    border: 1px solid transparent !important;
  }

  .carousel__pagination,
  .glide-carousel__pagination {
    margin-top: 1rem;
  }

  hr {
    border-top: 0.1rem dashed $grey-light2;
    border-bottom: none;
    margin: 0 2.5rem 1.6rem 2.5rem;
  }

  &__squad-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1.7rem;
    margin-bottom: 1.6rem;

    a {
      margin: 0 !important;
      max-width: 31.1rem;
      font-family: $ef-font;
      min-height: 3.7rem;
      width: 100%;
    }

    .cta--tertiary {
      &:hover {
        border: 1px solid;
      }
    }
  }

  .one-squad-cta > a {
    max-width: 31.1rem !important;
  }

  .two-squad-cta > a {
    max-width: 14.9rem;
  }

  .three-squad-cta > a:nth-child(1) {
    max-width: 31.1rem;
  }

  .three-squad-cta > a:nth-child(2),
  .three-squad-cta > a:nth-child(3) {
    max-width: 14.9rem;
  }

  &__postponed-cta {
    width: 100%;
    max-width: 31.1rem;
    padding: 0.9rem 0;
    margin: 0 auto;
    background: $orange-light;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $red;
    text-transform: uppercase;
  }

  .carousel-nav-block {
    display: block;
  }

  .squad-player-section {
    margin: 2.4rem 0 0 0;
  }

  @media screen and (min-width: $mq-medium) {
    .carousel-container {
      display: contents;
    }

    &__squad-cta {
      column-gap: 2.8rem;

      a {
        max-width: 23.4rem !important;
        width: 100%;
      }
    }

    .glide__slides > li:not(:last-child) {
      border-right: 1px solid #eceef3;
    }

    .squad-player-section {
      margin: 2.8rem 0 2.4rem 0;
    }
  }

  @media screen and (min-device-width: 620px) and (max-device-width: 820px) {
    .squad-players-announcement__squad-cta {
      margin: 0 1.5rem;
    }
  }

  @media screen and (min-width: 900px) {
    .carousel-nav-block {
      display: none;
    }
  }
}
  • URL: /components/raw/squad-players-announcement/squad-players-announcement.scss
  • Filesystem Path: src/library/modules/squad-players-announcement/squad-players-announcement.scss
  • Size: 2.6 KB 
<div class="squad-players-announcement">
  <div class="carousel-container">
    <div class="carousel squad-player-section" data-behavior="carousel-glide">
      <div data-glide-el="track">
        <ul class="glide__slides">
          {{#each squad-role}}
          <li>{{render '@squad-players' 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>

  <hr>

  <div class="squad-players-announcement__squad-cta">
    {{render '@cta' cta merge="true"}}
    {{#if cta1}}
    {{render '@cta' cta1 merge="true"}}
    {{/if}}
    {{#if cta2}}
    {{render '@cta' cta2 merge="true"}}
    {{/if}}
  </div>
</div>