<div class="legend-squad-page" style="background-image: url(/assets/example-content/legends-overlay.svg);">
<div class="legends-squad-filter-menu" data-behaviour="legends-squad-filter-menu">
<div class="legends-squad-filter-menu__cancel">
<div class="filter-text">Adjust Filters</div>
<div class="close-filter">Cancel</div>
<div class="back-filter">Back</div>
</div>
<div class="legends-squad-filter-menu__filter-scroll">
<div class="legends-squad-filter-menu__filter-section">
<div class="legends-squad-filter-menu__filter-section--list" id="all-squad">
<a class="legends-squad-filter-menu__filter-section--squadlist">
<div>
<div class="filterby">Filter by Squad</div>
<div class="title">All Squads</div>
</div>
</a>
<div class="squad-line"></div>
</div>
<div class="legends-squad-filter-menu__filter-section--list" id="all-genders">
<a class="legends-squad-filter-menu__filter-section--squadlist">
<div>
<div class="filterby">Filter by Gender</div>
<div class="title">All Genders</div>
</div>
</a>
<div class="gender-line"></div>
</div>
<div class="legends-squad-filter-menu__filter-section--list" id="all-postions">
<a class="legends-squad-filter-menu__filter-section--squadlist">
<div>
<div class="filterby">Filter by Postions</div>
<div class="title">All Postions</div>
</div>
</a>
<div class="postions-line"></div>
</div>
</div>
<div class="legends-squad-filter-menu__filter-options">
<div class="legends-squad-filter-menu__filter-options--buttons" id=all-squad-filter>
<div class="filter-buttons">
<input type="checkbox" class="all" id="1" value="all">
<label for="1">All Squads</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="mens" id="2" value="mens">
<label for="2">Mens Senior Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="womens" id="3" value="womens">
<label for="3">Womens Senior Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="para" id="4" value="para">
<label for="4">Para Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="fustal" id="5" value="fustal">
<label for="5">Fustal Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="link" id="6" value="link">
<label for="6">Link</label>
</div>
<div class="line"></div>
</div>
<div class="legends-squad-filter-menu__filter-options--buttons" id=all-gender-filter>
<div class="filter-buttons">
<input type="checkbox" class="mens" id="7" value="mens">
<label for="7">Mens Senior Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="womens" id="8" value="womens">
<label for="8">Womens Senior Squad</label>
</div>
<div class="line"></div>
</div>
<div class="legends-squad-filter-menu__filter-options--buttons" id=all-postions-filter>
<div class="filter-buttons">
<input type="checkbox" class="para" id="9" value="para">
<label for="9">Para Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="fustal" id="10" value="fustal">
<label for="10">Fustal Squad</label>
</div>
<div class="line"></div>
<div class="filter-buttons">
<input type="checkbox" class="link" id="11" value="link">
<label for="11">Link</label>
</div>
<div class="line"></div>
</div>
</div>
</div>
<div class="legends-squad-filter-menu__button-group">
<div class="legends-squad-filter-menu__button-group--results">
<div class="result">Show Me <span id="showmeresult"></span><span> Results</span></div>
<div class="filter reset-filter">Reset Filters</div>
</div>
<div class="legends-squad-filter-menu__button-group--apply-filter">
<div class="result apply-filters"> Apply Filters </div>
</div>
</div>
</div>
<div class="content-managable-banner">
<div class="content-managable-banner__heading-block">
<h1 class="content-managable-banner__heading">England teams</h1>
<ul>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/gold-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/gold-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
<li>
<noscript class="loading-lazy">
<img src="/assets/example-content/gold-lion-small.svg" alt="" loading="lazy" />
</noscript>
</li>
</ul>
</div>
<p class="content-managable-banner__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.</p>
</div>
<div class="banner ">
<picture>
<source media="(max-width: 600px)" srcset="/assets/example-content/Hero-image-600.png">
<source media="(min-width: 600px)" srcset="/assets/example-content/Hero-image.png">
<img src="/assets/example-content/Hero-image.png" alt="">
</picture>
</div>
<div class="common-template overlap-header-content">
<div class="page-content__row-container">
<div class="legends-content">
<section class="legends-squad-list">
<div class="squad-list__container">
<div class="squad-profiles-wrapper">
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
</div>
<div id="squad-block-goalkeepers" class="player-profile-list legends-player-profile-list" role="region" aria-label="150+ ">
<h2 class="player-profile-list__title">150+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":true, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
<div id="squad-block-defenders" class="player-profile-list legends-player-profile-list" role="region" aria-label="100+ ">
<h2 class="player-profile-list__title">100+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
<div id="squad-block-midfielders" class="player-profile-list legends-player-profile-list" role="region" aria-label="50+ ">
<h2 class="player-profile-list__title">50+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":true, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">2</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container legends-manager">
<h2 class="heading-section ">Managers</h2>
<div class="container__content">
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-glide" data-carousel-loop="true">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</li>
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</li>
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</li>
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</li>
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</li>
<li>
<div class="legends-player-profile">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Games managed</p>
<p class="value">39</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</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>
</div>
</section>
<div class="legends__signpost">
<div class="row-container common-template__row-container">
<section class="signpost membership-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<img class="zoom-in" src="/assets/example-content/legends-signpost.png" alt="membership signpost">
</div>
<div class="signpost__info">
<h3 class="signpost__heading">ENGLAND STORE LINK</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.</p>
<hr />
<span class="cta cta--primary " id="find-course-near-me" tabindex="0">CALL TO ACTION</span>
</div>
</a href="#">
</section>
</div>
<h2 class="heading-section">
Related Content
</h2>
<div class="tabbed-carousel" data-behavior="tabs-with-carousel">
<div class="tabbed-carousel__navigation">
<div class="tabbed-carousel__tab-list" role="tablist" aria-label="">
<a href="#panel-related-article" role="tab" aria-selected="true" aria-controls="panel-related-article" id="tab-related-article" tabindex="0" data-behavior="related-article">
related article
</a>
</div>
<div class="tabbed-carousel__select-list">
<select data-behavior="tabbed-carousel-select-list">
<option selected value="related-article">related article</option>
</select>
</div>
</div>
<div class="tabbed-carousel__tab-panels">
<div id="panel-related-article" role="tabpanel" tabindex="0" aria-labelledby="tab-related-article" data-tab-label="related article">
<div class="carousel" data-behavior="carousel-related-article">
<div>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" data-poster-image="/assets/example-content/womens-hero-600.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="vimeo-video-lightbox" data-video-id="545863177" data-poster-image="/assets/example-content/autoplay-hero-error.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<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="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<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 tabbed-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>
</div>
</div>
<div class="sponsorship-list">
<div class="primary-sponsors container">
<div class="container__content">
<ul class="primary-sponsors__logos">
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/footer-sponsor-nike.png" alt="Nike" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/footer-sponsor-bt.png" alt="BT" />
</a>
</li>
</ul>
</div>
</div>
<hr />
<div class="secondary-sponsors container">
<div class="container__content">
<ul class="secondary-sponsors__logos">
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-google-cloud.png" alt="Google-cloud" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-lucozade.png" alt="Lucozade" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-deliveroo.png" alt="Deliveroo" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-nationwide.png" alt="Nationwide" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-paypal.png" alt="Paypal" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-disney.png" alt="Disney" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-national-express.png" alt="National-express" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-snickers.png" alt="Snickers" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-ee.png" alt="EE" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-lg.png" alt="LG" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-emirates.png" alt="Emirates" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-McDonald.png" alt="McDonald" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-budweiser.png" alt="Budweiser" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-continental.png" alt="Continental" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-mitre.png" alt="Mitre" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-cognizant.png" alt="Cognizant" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-pokemon.png" alt="Pokemon" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-buildbase.png" alt="Buildbase" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="/assets/example-content/secondary-sponsors/footer-boots.png" alt="Boots" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="legends-squad-filter remove-filter" data-behaviour="legends-squad-filter">
<div class="legends-squad-filter__content">
<div class="legends-squad-filter__result">Filter Results</div>
<div class="legends-squad-filter__count">
<div class="number" id="number">0</div>
</div>
</div>
</div>
</div>
No notes defined.
{
"smallimage": "/assets/example-content/Hero-image-600.png",
"bigimage": "/assets/example-content/Hero-image.png",
"heading": "ENGLAND STORE LINK",
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.",
"image": "/assets/example-content/legends-signpost.png",
"cta": {
"copy": "CALL TO ACTION"
},
"banner": {
"heading": "England teams",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.",
"image": "/assets/example-content/gold-lion-small.svg"
}
}
.legend-squad-page {
background-color: $grey-light;
background-position: center top;
background-repeat: no-repeat;
background-size: auto;
.content-managable-banner {
background: $black;
&__heading {
color: $white;
margin-bottom: 2.4rem;
margin-top: 6rem;
line-height: 6.3rem;
}
&__copy {
margin-top: 8rem;
color: $white;
}
}
.page-content {
overflow: hidden;
position: relative;
}
.legends-bg {
margin-top: 30rem;
opacity: 0.1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
background-size: cover;
}
.legends-content {
position: relative;
}
.player-profile-list {
&__title {
color: $white;
}
}
.overlap-header-content {
background: $black;
}
.legends__signpost {
background: #e5e5e5;
padding: 5.1rem 1.8rem 2.2rem 2.6rem;
.row-container {
padding: 0;
}
.heading-section {
margin: 5.1rem 0 0.2rem 0;
}
}
.membership-signpost {
.signpost {
&__outer {
border-radius: 8px;
background: $black !important;
}
&__info {
margin: 5.2rem 0;
}
}
}
}
@media screen and (min-width: $mq-medium) {
.legend-squad-page {
.squad-list__container {
padding-left: 14.865rem;
padding-right: 11rem;
}
.legends__signpost {
padding: 0 15rem 9.2rem 15rem;
.heading-section {
margin: 0;
}
}
.banner {
position: relative;
img {
object-fit: fill;
}
}
.membership-signpost {
height: 39rem;
margin: 5.2rem 0 9.3rem 0;
max-width: 114rem;
.signpost {
&__info {
margin: 1.6rem 0;
.cta {
background: $black;
}
}
}
}
}
}
// eslint-disable-line no-unused-expressions
:root [data-brand='legends'] {
.legend-squad-page {
.player-profile-list {
&__title {
color: $white;
}
&__title2 {
color: $grey;
}
}
}
.membership-signpost {
.signpost {
&__heading,
&__subheading {
color: $white;
}
&__info {
.cta {
background: $black;
}
}
}
}
}
<div class="legend-squad-page" style="background-image: url(/assets/example-content/legends-overlay.svg);">
{{render '@legends-squad-filter-menu'}}
{{render '@content-manageable-banner' banner merge="true"}}
{{render '@hero-image-banner' this merge="true"}}
<div class="common-template overlap-header-content">
<div class="page-content__row-container">
<div class="legends-content">
{{render '@legends-squad-list'}}
{{render '@legends-manager'}}
<div class="legends__signpost">
{{#> @row-container}}
{{render '@membership-signpost' this merge=true}}
{{/ @row-container}}
<h2 class="heading-section">
Related Content
</h2>
{{render '@tabbed-carousel--default'}}
</div>
</div>
</div>
{{render '@sponsorship-list'}}
</div>
{{render '@legends-squad-filter'}}
</div>