<section class="membership-benefits">
<h2 class="membership-benefits__title">Membership benefits</h2>
<p class="membership-benefits__description">Every England fan is different. That's why our memberships are designed to offer varying levels of access, rewards and exclusive experiences. Compare the benefits below to discover which membership best fits your football journey.</p>
<table class="membership-benefits__table">
<caption class="visually-hidden">Compare membership benefits</caption>
<thead>
<tr>
<td class="membership-benefits__corner"></td>
<th scope="col" class="membership-benefits__tier">England+</th>
<th scope="col" class="membership-benefits__tier">Lionesses+</th>
<th scope="col" class="membership-benefits__tier">Three Lions+</th>
</tr>
</thead>
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">Tickets</th>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Priority access to home tickets</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">2-4-1 tickets on Men's U21s & Women's U23s fixtures</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">£5 off home tickets</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Priority access to tournament tickets and away tickets</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
</tbody>
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">Retail</th>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">10% discount on England store merchandise, early bird sale access</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Partner offers</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">VIP Partner offers</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">50% off Wembley tours</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
</tbody>
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">Perks</th>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Prize draws / competitions</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Welcome gift</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Digital membership card</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
</tbody>
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">Content</th>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Early access to premium content</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Exclusive content</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
</tbody>
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">Loyalty and Rewards</th>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Earn caps for attending games</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Earn loyalty points</th>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">Redeem loyalty points for rewards</th>
<td class="membership-benefits__cell">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
<td class="membership-benefits__cell">
<img class="membership-benefits__icon" src="/assets/example-content/green-tick.svg" alt="Included" loading="lazy">
</td>
</tr>
</tbody>
</table>
</section>
No notes defined.
{
"title": "Membership benefits",
"description": "Every England fan is different. That's why our memberships are designed to offer varying levels of access, rewards and exclusive experiences. Compare the benefits below to discover which membership best fits your football journey.",
"caption": "Compare membership benefits",
"tickIcon": {
"src": "/assets/example-content/green-tick.svg",
"alt": "Included"
},
"tiers": [
{
"id": "england",
"name": "England+"
},
{
"id": "lionesses",
"name": "Lionesses+"
},
{
"id": "threelions",
"name": "Three Lions+"
}
],
"groups": [
{
"title": "Tickets",
"benefits": [
{
"label": "Priority access to home tickets",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "2-4-1 tickets on Men's U21s & Women's U23s fixtures",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "£5 off home tickets",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
},
{
"label": "Priority access to tournament tickets and away tickets",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
}
]
},
{
"title": "Retail",
"benefits": [
{
"label": "10% discount on England store merchandise, early bird sale access",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "Partner offers",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "VIP Partner offers",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
},
{
"label": "50% off Wembley tours",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
}
]
},
{
"title": "Perks",
"benefits": [
{
"label": "Prize draws / competitions",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "Welcome gift",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
},
{
"label": "Digital membership card",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
}
]
},
{
"title": "Content",
"benefits": [
{
"label": "Early access to premium content",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "Exclusive content",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
}
]
},
{
"title": "Loyalty and Rewards",
"benefits": [
{
"label": "Earn caps for attending games",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "Earn loyalty points",
"included": {
"england": true,
"lionesses": true,
"threelions": true
}
},
{
"label": "Redeem loyalty points for rewards",
"included": {
"england": false,
"lionesses": true,
"threelions": true
}
}
]
}
]
}
.membership-benefits {
max-width: 840px;
margin: 0 auto;
padding: 32px 16px;
color: #0b1d3a;
font-family: 'FS Dillon';
background-color: #fff;
}
.membership-benefits__title {
margin: 0 0 16px;
font-family: 'England FC';
font-size: 36px;
font-weight: normal;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
.membership-benefits__description {
margin: 0 0 24px;
font-size: 14px;
line-height: 20px;
color: #5a6475;
}
.membership-benefits__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.membership-benefits__corner {
width: auto;
padding: 0;
}
.membership-benefits__tier {
width: 72px;
padding: 0 0 12px;
font-size: 14px;
font-weight: 500;
line-height: 18px;
text-align: center;
vertical-align: bottom;
}
.membership-benefits__group-row>* {
padding: 16px 0 8px;
}
.membership-benefits__group:not(:first-of-type) .membership-benefits__group-row>* {
border-top: 1px solid #d9dce1;
}
.membership-benefits__group-title {
font-size: 15px;
font-weight: 500;
line-height: 20px;
text-align: left;
vertical-align: middle;
}
.membership-benefits__benefit {
padding: 6px 8px 6px 0;
font-size: 14px;
font-weight: normal;
line-height: 20px;
color: #5a6475;
text-align: left;
vertical-align: middle;
}
.membership-benefits__cell {
padding: 6px 0;
text-align: center;
vertical-align: middle;
}
.membership-benefits__group .membership-benefits__row:last-child>* {
padding-bottom: 16px;
}
.membership-benefits__icon {
display: block;
width: 18px;
height: 18px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.membership-benefits {
padding: 48px 24px;
}
.membership-benefits__title {
font-size: 48px;
}
.membership-benefits__description,
.membership-benefits__benefit {
font-size: 16px;
line-height: 24px;
}
.membership-benefits__tier {
width: 110px;
font-size: 16px;
line-height: 20px;
}
.membership-benefits__group-title {
font-size: 18px;
line-height: 24px;
}
.membership-benefits__icon {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 480px) {
.membership-benefits__tier {
width: 72px;
font-size: 12px;
line-height: 16px;
}
}
<section class="membership-benefits">
<h2 class="membership-benefits__title">{{title}}</h2>
<p class="membership-benefits__description">{{description}}</p>
<table class="membership-benefits__table">
<caption class="visually-hidden">{{caption}}</caption>
<thead>
<tr>
<td class="membership-benefits__corner"></td>
{{#each tiers}}
<th scope="col" class="membership-benefits__tier">{{name}}</th>
{{/each}}
</tr>
</thead>
{{#each groups}}
<tbody class="membership-benefits__group">
<tr class="membership-benefits__group-row">
<th scope="rowgroup" colspan="4" class="membership-benefits__group-title">{{title}}</th>
</tr>
{{#each benefits}}
<tr class="membership-benefits__row">
<th scope="row" class="membership-benefits__benefit">{{label}}</th>
{{#each included}}
<td class="membership-benefits__cell">
{{#if this}}
<img class="membership-benefits__icon" src="{{@root.tickIcon.src}}" alt="{{@root.tickIcon.alt}}" loading="lazy">
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
{{/each}}
</table>
</section>