England Football

Following Match Card 

<article class="following-match-card" data-filter='{ "filter": "competition", "name": "", "id": "" }' data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
    <div class="following-match-card__fixture-info fixture-card__fixture-info">
        <h3 class="following-match-card__title">
            Following match
        </h3>
        <p class="following-match-card__subtitle fixture-card__tournament">
            euro 2021 group stage
        </p>
        <span class="following-match-card__location fixture-card__location">wembley stadium, england</span>
        <span class="following-match-card__location fixture-card__location">sat 14 june 2020</span>
    </div>
    <div class="following-match-fixture-detail fixture-detail">
        <p class="visually-hidden">Fixture</p>
        <p class="following-match-fixture-detail__col fixture-detail__col">
            <span class="following-match-fixture-detail__team fixture-detail__team">
                <img src="/assets/example-content/crest-england.svg" alt="" />England</span>
        </p>
        <p class="following-match-fixture-detail__col fixture-detail__col">
            <span class="following-match-fixture-detail__team fixture-detail__team">
                <img src="/assets/example-content/crest-iceland.png" alt="" />Denmark</span>
        </p>
        <p class="following-match-fixture-detail__time fixture-detail__time">20:00</p>
    </div>
    <div class="following-match-card__ctas fixture-card__ctas">
        <a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
            <p>Buy tickets</p>
        </a>

    </div>
</article>

#Following Match Widget

  • This widget styling overrides Fixture Card styling. We shall separate out common styling and aim to extend common part in this widget.
{
  "title": "Following match",
  "subTitle": "euro 2021 group stage",
  "location": "wembley stadium, england",
  "date": "sat 14 june 2020",
  "homeTeam": "England",
  "awayTeam": "Denmark",
  "timer": {
    "hours": "20",
    "minutes": "00"
  },
  "cta": {
    "copy": "Buy tickets",
    "name": "buy-tickets",
    "href": "https://ticketing.thefa.com/",
    "target": "_blank"
  }
}
  • Content: 
    /* This css module overwrites fixture-card styles as required */
.following-match-card {
  @extend .fixture-card;

  &__title {
    @extend .heading-3;

    padding-bottom: 1.2rem;
    color: var(--brand-primary);
    line-height: 4rem;
  }

  &__subtitle {
    @include text-s;
  }

  &__location {
    @include text-xs;

    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    line-height: 1.1rem;
  }

  &__ctas {
    .cta {
      width: 100%;
    }
  }
  &__nomatch {
    img {
      width: 9rem;
      height: 10.6rem;
      margin: 0 auto;
      margin-top: 3.8rem;
    }
    p {
      font-family: $text-font;
      font-size: 1.4rem;
      line-height: 2rem;
      letter-spacing: 0.02em;
      width: 27.4rem;
      margin: 0 auto;
      margin-top: 3.2rem;
      text-align: center;
    }
  }

  @media screen and (min-width: $mq-large) {
    display: block;
    left: -1px;
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.05) !important;
    padding-top: 3.2rem;

    &__subtitle {
      padding-bottom: $spacing-s;
    }

    &__fixture-info {
      text-align: center;
    }

    &__ctas {
      margin: 0 auto;
      max-width: 30.6rem;
    }
  }
}

.following-match-fixture-detail {
  @extend .fixture-detail;

  padding: 1.3rem 0 3.6rem 0;

  @media screen and (min-width: 950px) {
    &__team {
      font-size: 1.1rem;
      flex-direction: column;

      img {
        margin: 0 0 $spacing-s 0;
      }
    }

    &__col {
      justify-self: normal;

      & + & {
        justify-self: normal;

        .fixture-detail__team {
          flex-direction: column;

          img {
            margin: 0 0 $spacing-s 0;
          }
        }
      }
    }

    &__time {
      line-height: 2.2rem;
      font-size: 2.2rem;
    }
  }
}
  • URL: /components/raw/following-match-card/following-match-card.scss
  • Filesystem Path: src/library/components/following-match-card/following-match-card.scss
  • Size: 1.8 KB 
<article class="following-match-card"
  data-filter='{ "filter": "competition", "name": "", "id": "" }'
  data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
  <div class="following-match-card__fixture-info fixture-card__fixture-info">
    <h3 class="following-match-card__title">
      {{title}}
    </h3>
    {{#unless edgecase}}
    <p class="following-match-card__subtitle fixture-card__tournament">
      {{subTitle}}
    </p>
    <span class="following-match-card__location fixture-card__location">{{location}}</span>
    <span class="following-match-card__location fixture-card__location">{{date}}</span>
    {{/unless}}
  </div>
  {{#unless edgecase}}
  <div class="following-match-fixture-detail fixture-detail">
    <p class="visually-hidden">Fixture</p>
    <p class="following-match-fixture-detail__col fixture-detail__col">
      <span class="following-match-fixture-detail__team fixture-detail__team">
        <img src="/assets/example-content/crest-england.svg" alt="" />{{homeTeam}}</span>
    </p>
    <p class="following-match-fixture-detail__col fixture-detail__col">
      <span class="following-match-fixture-detail__team fixture-detail__team">
        <img src="/assets/example-content/crest-iceland.png" alt="" />{{awayTeam}}</span>
    </p>
    {{#unless tbc}}
    <p class="following-match-fixture-detail__time fixture-detail__time">{{timer.hours}}:{{timer.minutes}}</p>
    {{/unless}}
    {{#if tbc}}
    <p class="following-match-fixture-detail__time fixture-detail__time">TBC</p>
    {{/if}}
  </div>
  {{#unless cancelled}}
  <div class="following-match-card__ctas fixture-card__ctas">
    {{render '@cta' cta merge="true"}}
    {{#if cta1}}
    {{render '@cta--disabled' cta1 merge="true"}}
    {{/if}}
  </div>
  {{/unless}}
  {{#if cancelled}}
  <div class="fixture-card__match-status fixture-card__match-status--cancelled"><img src="/assets/images/icon-warning.svg"
      alt="" /><span class="status-line"></span><span class="status-label">Match cancelled</span></div>
  {{/if}}
  {{/unless}}
  {{#if edgecase}}
    <div class="following-match-card__nomatch">
      <img src="/assets/example-content/crest-england.svg" alt="England">
      <p>WE ARE WAITING FOR THE DETAILS OF OUR UPCOMING MATCH TO BE CONFIRMED. BEAR WITH US – WE’LL HAVE MORE INFORMATION SHORTLY.</p>
    </div>
  {{/if}}
</article>