England Football

Form Guide 

<div class="form-guide container">
    <div class="form-guide__bg-overlay">
        <div class="container__content">
            <img class="form-guide__results-logo" src="/assets/images/england_crest.png" alt="" />
            <p class="text-s vertical-spacing-s">Last 5 matches</p>
            <ul class="form-results">
                <li data-behaviour="tooltip">
                    <p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
                    <div class="form-results__tooltip" data-ref="tooltip">
                        <div class="form-results__match-date">WED 16 DEC 2020</div>
                        <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
                        <div class="match-result">
                            <div class="match-result__team">
                                <img src="/assets/example-content/germany-flag.png" alt="" />
                                <span>GER</span>
                            </div>
                            <div>
                                <div class="match-result__score">2 - 3</div>
                                <span>HT: 8-8</span>
                            </div>
                            <div class="match-result__team">
                                <img src="/assets/example-content/england-flag.png" alt="" />
                                <span>ENG</span>
                            </div>
                        </div>
                        <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
                        <a href="/" class="cta cta--primary ">
                            <p>Post-match report</p>
                        </a>

                    </div>
                </li>
                <li data-behaviour="tooltip">
                    <p class="form form--loss" tabindex="0" role="button" aria-label="loss">l</p>
                    <div class="form-results__tooltip" data-ref="tooltip">
                        <div class="form-results__match-date">WED 16 DEC 2020</div>
                        <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
                        <div class="match-result">
                            <div class="match-result__team">
                                <img src="/assets/example-content/germany-flag.png" alt="" />
                                <span>GER</span>
                            </div>
                            <div>
                                <div class="match-result__score">2 - 3</div>
                                <span>HT: 8-8</span>
                            </div>
                            <div class="match-result__team">
                                <img src="/assets/example-content/england-flag.png" alt="" />
                                <span>ENG</span>
                            </div>
                        </div>
                        <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
                        <a href="/" class="cta cta--primary ">
                            <p>Post-match report</p>
                        </a>

                    </div>
                </li>
                <li data-behaviour="tooltip">
                    <p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
                    <div class="form-results__tooltip" data-ref="tooltip">
                        <div class="form-results__match-date">WED 16 DEC 2020</div>
                        <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
                        <div class="match-result">
                            <div class="match-result__team">
                                <img src="/assets/example-content/germany-flag.png" alt="" />
                                <span>GER</span>
                            </div>
                            <div>
                                <div class="match-result__score">2 - 3</div>
                                <span>HT: 8-8</span>
                            </div>
                            <div class="match-result__team">
                                <img src="/assets/example-content/england-flag.png" alt="" />
                                <span>ENG</span>
                            </div>
                        </div>
                        <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
                        <a href="/" class="cta cta--primary ">
                            <p>Post-match report</p>
                        </a>

                    </div>
                </li>
                <li data-behaviour="tooltip">
                    <p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
                    <div class="form-results__tooltip" data-ref="tooltip">
                        <div class="form-results__match-date">WED 16 DEC 2020</div>
                        <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
                        <div class="match-result">
                            <div class="match-result__team">
                                <img src="/assets/example-content/germany-flag.png" alt="" />
                                <span>GER</span>
                            </div>
                            <div>
                                <div class="match-result__score">2 - 3</div>
                                <span>HT: 8-8</span>
                            </div>
                            <div class="match-result__team">
                                <img src="/assets/example-content/england-flag.png" alt="" />
                                <span>ENG</span>
                            </div>
                        </div>
                        <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
                        <a href="/" class="cta cta--primary ">
                            <p>Post-match report</p>
                        </a>

                    </div>
                </li>
                <li data-behaviour="tooltip">
                    <p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
                    <div class="form-results__tooltip" data-ref="tooltip">
                        <div class="form-results__match-date">WED 16 DEC 2020</div>
                        <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
                        <div class="match-result">
                            <div class="match-result__team">
                                <img src="/assets/example-content/germany-flag.png" alt="" />
                                <span>GER</span>
                            </div>
                            <div>
                                <div class="match-result__score">2 - 3</div>
                                <span>HT: 8-8</span>
                            </div>
                            <div class="match-result__team">
                                <img src="/assets/example-content/england-flag.png" alt="" />
                                <span>ENG</span>
                            </div>
                        </div>
                        <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
                        <a href="/" class="cta cta--primary ">
                            <p>Post-match report</p>
                        </a>

                    </div>
                </li>
            </ul>
            <p class="text-xs vertical-spacing-m">Rollover for match information</p>
        </div>
    </div>
</div>

No notes defined.

{
  "subtitle": {
    "copy": "Last 5 matches",
    "additionalClasses": "vertical-spacing-s"
  },
  "note": {
    "copy": "Rollover for match information",
    "additionalClasses": "vertical-spacing-m"
  }
}
  • Content: 
    .form-guide {
  color: $white;
  padding-top: 4.8rem;
  padding-bottom: $spacing-l;
  text-align: center;
  text-transform: uppercase;
  overflow: visible;

  .container__content {
    background: rgba(var(--brand-primary-rgb), 0.9);
    border-radius: $border-radius;
    position: relative;
  }

  .vertical-spacing-s {
    padding-top: 3.3rem;
  }

  &__bg-overlay {
    background: var(--brand-tertiary) var(--branded-lion-mask-full) no-repeat
      center;
    background-size: cover;
    border-radius: $border-radius;
  }
  &__results-logo {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  @media (min-width: $mq-small) {
    .vertical-spacing-s {
      padding-top: 3.9rem;
      padding-bottom: 1.2rem;
    }
  }

  @media (max-width: $mq-small) {
    .common-template__row-container & {
      margin: 1.2rem 0;
    }
  }
}
  • URL: /components/raw/form-guide/form-guide.scss
  • Filesystem Path: src/library/modules/form-guide/form-guide.scss
  • Size: 882 Bytes 
<div class="form-guide container">
  <div class="form-guide__bg-overlay">
    <div class="container__content">
      <img class="form-guide__results-logo" src="/assets/images/england_crest.png" alt="" />
      {{render '@text--s' subtitle merge="true"}}
      {{render '@form-results'}}
      {{render '@text--xs' note merge="true"}}
    </div>
  </div>
</div>