<div class="caps-details">
<div class="caps-details__container">
<div class="caps-details--row">
<p class="caps-details--text">
<sapn class="caps-details--heighlight">730</sapn> people have <sapn class="caps-details--heighlight">49
</sapn> caps or more
</p>
<p class="caps-details--text">
<sapn class="caps-details--heighlight">718
</sapn> are England Supporters
Travel Club members
</p>
<p class="caps-details--text">
<sapn class="caps-details--heighlight">12</sapn>
are England Supporters
Club members
</p>
</div>
</div>
<div class="caps-details__table-container">
<div class="cta-container">
<a href="/" class="cta cta--quaternary">
<p>
cta
</p>
</a>
</div>
<div class="collapsible-content-element">
<div class="profile-page--caps-table">
<div class="caps-table-component">
<div class="caps-table--container">
<table class="caps-table" data-first-ballot="70%" data-second-ballot="mini ballot" data-third-ballot="30%">
<thead>
<tr>
<th>
<p class="caps-table--title">Caps</p>
<p class="caps-table--sub-title">Number of caps earned since June 2022.</p>
</th>
<th>
<p class="caps-table--title">Total Members</p>
<p class="caps-table--sub-title">Total count of members who have earned this number of caps.</p>
</th>
<th>
<p class="caps-table--title">ESC Members</p>
<p class="caps-table--sub-title">Members who have earned this number of caps.</p>
</th>
<th>
<p class="caps-table--title">ESTC Members</p>
<p class="caps-table--sub-title">Travel Club members who have earned this number of caps.</p>
</th>
<th>
<p class="caps-table--title">Total Above</p>
<p class="caps-table--sub-title">Total of this caps level and above</p>
</th>
</tr>
</thead>
<tbody>
<tr class="empty-tr"></tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>0</td>
</tr>
<tr>
<th>33</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>2,00</td>
</tr>
<tr>
<th>32</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>3,00</td>
</tr>
<tr>
<th>31</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>4,00</td>
</tr>
<tr>
<th>30</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>5,00</td>
</tr>
<tr>
<th>29</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>6,00</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>7,00</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>8,00</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>9,00</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1,000</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1,100</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1,200</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1,300</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1,400</td>
</tr>
<tr>
<th>34</th>
<td>809</td>
<td>3</td>
<td>806</td>
<td>1500</td>
</tr>
</tbody>
</table>
</div>
<div class="enter-away-application">
<p class="enter-away-application--title">Enter Away Allocation</p>
<div class="enter-away-application--input-container">
<input class="enter-away-application--input" type="number" min="0" inputmode="numeric" placeholder="Enter ticket allocation" />
<img aria-describedby="tooltip" src="./../../../assets/example-content/info-icon.svg" class="info-tooltip" alt="info icon" />
<div id="tooltip" role="tooltip" class="info-tooltip-text">Enter the total number of allocated tickets for
an away fixture. We’ll calculate and highlight which cap levels are
guaranteed to receive a ticket and which levels will be entered into a second ballot.
<div id="arrow" data-popper-arrow></div>
</div>
</div>
</div>
<div class="caps-table-component__caption-container">
<p>Special thanks to ESTC members <span class="members">Matt Isle</span> and <span class="members">David Lilley
</span> for their valuable
contributions and inspiration behind
this
enhanced caps table.</p>
<p>This calculator is for illustrative purposes only. Actual chances of securing a ticket may vary based on
final
allocations and demand.</p>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
import collapsible from '../collapsible/collapsible';
export default parentElement => {
const [ref, content] = parentElement.querySelectorAll(
'.cta-container .cta--quaternary, .collapsible-content-element'
);
collapsible(ref, content);
};
@mixin sm {
@media screen and (max-width: 744px) {
@content;
}
}
@mixin md {
@media screen and (max-width: 1280px) {
@content;
}
}
.caps-details {
width: 100%;
border-radius: 4px;
background-color: $grey-light;
&__container {
padding: 24px 32px;
}
&__table-container {
.cta {
margin: 0 32px 32px 32px;
}
}
&--title {
font-weight: 400;
font-size: 40px;
font-family: 'England FC', arial, helvetica, sans-serif;
color: $blue;
text-align: center;
letter-spacing: 0.32px;
}
&--row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 28px;
}
&--text {
font-family: $registration-font;
text-align: center;
font-weight: 400;
font-size: 22px;
color: $blue;
line-height: 28px;
letter-spacing: 0.16px;
max-width: 225px;
}
&--heighlight {
font-weight: 700;
color: $crest-blue;
}
.cta {
background-color: #fff;
color: $blue-accent6;
border-color: $blue-accent6;
&::after {
content: '';
background-image: url('./assets/example-content/keyboard_arrow_up_eng.svg');
transform: rotate(3.142rad);
display: block;
margin-left: 8px;
width: 7px;
height: 4px;
background-repeat: no-repeat;
background-size: contain;
}
&.active {
background-color: $blue-accent6;
color: #fff;
&::after {
transform: rotate(180deg);
background-image: url('./assets/example-content/keyboard_arrow_down_white.svg');
}
}
}
@media (hover: hover) and (pointer: fine) {
.cta {
&:hover {
background-color: $blue-accent;
color: #fff;
&::after {
background-image: url('./assets/example-content/keyboard_arrow_down_white.svg');
transform: rotate(0);
}
}
&.active {
&:hover {
background-color: white;
color: $blue-accent6;
&::after {
background-image: url('./assets/example-content/keyboard_arrow_up_eng.svg');
transform: rotate(0);
}
}
}
}
}
@include md {
&__container {
padding: 24px 16px;
}
&--title {
font-size: 34px;
}
&--text {
letter-spacing: -0.16px;
max-width: 100%;
}
}
@include sm {
&--title {
font-size: 30px;
}
&--row {
grid-template-columns: auto;
row-gap: 18px;
column-gap: 0;
}
&--text {
font-size: 16px;
letter-spacing: -0.16px;
}
}
}
<div class="caps-details">
<div class="caps-details__container">
{{!-- <p class="caps-details--title">GARETH, you’re in the top 1% of match-going England fans!</p> --}}
<div class="caps-details--row">
<p class="caps-details--text">
<sapn class="caps-details--heighlight">730</sapn> people have <sapn class="caps-details--heighlight">49
</sapn> caps or more
</p>
<p class="caps-details--text">
<sapn class="caps-details--heighlight">718
</sapn> are England Supporters
Travel Club members
</p>
<p class="caps-details--text">
<sapn class="caps-details--heighlight">12</sapn>
are England Supporters
Club members
</p>
</div>
</div>
<div class="caps-details__table-container">
<div class="cta-container">
<a href="/" class="cta cta--quaternary">
<p>
cta
</p>
</a>
</div>
<div class="collapsible-content-element">
<div class="profile-page--caps-table">
{{render '@caps-table'}}
</div>
</div>
</div>
</div>