<div class="fixed-banner ">
<div class="banner banner--gradient">
<picture>
<source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
<source media="(min-width: 600px)" srcset="/assets/example-content/womens-hero.png">
<img src="/assets/example-content/womens-hero.png" alt="">
</picture>
<div class="hero-overlay ">
<div class="hero-overlay--gradient"></div>
<div class="hero-overlay__content">
<div class="hero-overlay__tag">Tag for content</div>
<h1 class="hero-overlay__title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h1>
<div class="hero-overlay__subtitle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
<div class="hero-overlay__cta-btn">
<a class="cta cta--tertiary cta--inline" href="/">Button cta</a>
</div>
</div>
</div>
</div>
</div>
<div class="common-template overlap-header-content">
<div class="tray common-template__tray">
<h2 class="heading-section ">WHERE YOUR PRIDE IS REWARDED</h2>
<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/membership-signpost.png" alt="">
</div>
<div class="signpost__info">
<h3 class="signpost__heading"> Incredible Prizes </h3>
<p class="signpost__subheading"> England Football members get access to home tickets 48 hours before general sale </p>
<hr />
<span class="cta cta--primary">Sign Up Now</span>
</div>
</a href="#">
</section>
<section class="signpost membership-signpost membership-signpost--invert ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="">
</div>
<div class="signpost__info">
<h3 class="signpost__heading"> Monthly Giveaways </h3>
<p class="signpost__subheading"> England Football members get access to home tickets 48 hours before general sale </p>
<hr />
<span class="cta cta--primary">Sign Up Now</span>
</div>
</a href="#">
</section>
<section class="signpost membership-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="">
</div>
<div class="signpost__info">
<h3 class="signpost__heading"> Exclusive Partner Offers </h3>
<p class="signpost__subheading"> England Football members get access to home tickets 48 hours before general sale </p>
<hr />
<span class="cta cta--primary">Sign Up Now</span>
</div>
</a href="#">
</section>
<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 & 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 & 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 & 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 & 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 & 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>
<section class="large-video-player container">
<div class="large-video-player__inner container__content">
<h2 class="heading-section">Join the pride</h2>
<div class="large-video-player__content">
<div class="large-video-player__video-wrap">
<iframe src="https://www.youtube.com/embed/ufLSGCZEPrg" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="vimeo video" allowfullscreen></iframe>
</div>
<div class="large-video-player__video-info">
<div class="datetime-info">
<span class="date">11 Oct 2021</span>
<span class="duration">3:30</span>
<span class="short-title">Three Lions</span>
</div>
<h3 class="title">
Raheem Sterling Seals Comeback Win To Top Group
</h3>
<hr />
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uttempor labore et dolorgna aliqua.
</p>
<div class="share">
<div class="share__fallback" data-behavior="share-fallback">
<p>Share:</p>
<ul class="share__options">
<li>
<button data-behavior="copy-url" aria-label="Copy page link"><img src="/assets/images/share-copy-icon.svg" />
<span class="tooltip">Copy page link</span>
</button>
</li>
<li><a href="https://www.facebook.com/sharer.php?u=https://www.thefa.com/" aria-label="Facebook. Opens in a new tab" target="_blank" class="fb-button"><img src="/assets/images/share-facebook-icon.svg" alt="Facebook" /><span class="tooltip">Share on Facebook. Opens in a new tab</span></a></li>
<li><a href="https://twitter.com/intent/tweet?url=https://www.thefa.com/" aria-label="Twitter. Opens in a new tab" target="_blank" class="twitter-button"><img src="/assets/images/share-twitter-icon.svg" alt="Twitter" /><span class="tooltip">Share on Twitter. Opens in a new tab</span></a></li>
<li><a href="https://wa.me/?text=https://www.thefa.com/" aria-label="Whatsapp. Opens in new Tab" target="_blank" class="whatsapp-button"><img src="/assets/images/share-whatsapp-icon.svg" alt="WhatsApp" /><span class="tooltip">Share on Whatsapp</span></a></li>
</ul>
</div>
<button class="share__native" data-behavior="share-native"><span>Share:</span><img src="/assets/images/share-icon.svg" /></button>
</div>
</div>
</div>
</div>
</section>
<div><a href="/" class="cta cta--primary ">
<p>Singup now</p>
</a>
</div>
</div>
</div>
</div>
No notes defined.
{
"overlay": {
"title": "JANUARY DRAW: PLAY AT WEMBLEY",
"subtitle": "Sign up for free England Football membership and get the chance for you and 15 friends to play on Wembley’s hallowed turf"
},
"heading": {
"copy": "WHERE YOUR PRIDE IS REWARDED"
},
"component1": {
"heading": "Incredible Prizes",
"subheading": "England Football members get access to home tickets 48 hours before general sale"
},
"component2": {
"invert-layout": true,
"heading": "Monthly Giveaways",
"subheading": "England Football members get access to home tickets 48 hours before general sale"
},
"component3": {
"heading": "Exclusive Partner Offers",
"subheading": "England Football members get access to home tickets 48 hours before general sale"
},
"signupcta": {
"href": "/",
"copy": "Singup now",
"modifier": "primary"
},
"video": {
"heading": "Join the pride",
"enableShare": true
},
"shallow-banner": false
}
<div class="fixed-banner {{#if shallow-banner}}shallow-banner{{/if}}">
{{render '@hero-image-banner--with-overlay-and-gradient' overlay merge=true}}
</div>
<div class="common-template overlap-header-content">
{{#> @tray}}
{{render '@heading--section' heading merge=true}}
{{#> @row-container}}
{{render '@membership-signpost' component1 merge=true}}
{{render '@membership-signpost' component2 merge=true}}
{{render '@membership-signpost' component3 merge=true}}
{{render '@membership-carousel'}}
{{render '@large-video-player' video merge=true}}
<div>{{render '@cta' signupcta merge=true}}</div>
{{/ @row-container}}
{{/ @tray}}
</div>