England Football

Last Match Card: Match Postponed 

<article class="last-match-card fixture-card">

    <div class="last-match-card__fixture-info fixture-card__fixture-info">
        <h3 class="last-match-card__title">
            Last match
        </h3>
        <p class="last-match-card__subtitle fixture-card__tournament">
            euro 2021 group stage
        </p>
        <span class="last-match-card__location fixture-card__location">wembley stadium, england</span>
        <span class="last-match-card__location fixture-card__location">sat 14 june 2020</span>
    </div>

    <div class="last-match-fixture-detail fixture-detail--result">
        <p class="visually-hidden">Results</p>
        <p class="last-match-fixture-detail__col fixture-detail__col">
            <span class="last-match-fixture-detail__team fixture-detail__team">
                <img src="/assets/example-content/crest-england.svg" alt="England" />England</span>
            <span class="last-match-fixture-detail__score fixture-detail__score">0</span>
        </p>
        <p class="last-match-fixture-detail__col fixture-detail__col">
            <span class="last-match-fixture-detail__team fixture-detail__team">
                <img src="/assets/example-content/crest-iceland.png" alt="Iceland" />Iceland</span>
            <span class="last-match-fixture-detail__score fixture-detail__score">0</span>
        </p>
        <p class="last-match-fixture-detail__extra-info fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
                penalties</span></p>
    </div>

    <div class="last-match-card__ctas fixture-card__ctas">
        <a href="https://ticketing.thefa.com/" class="cta cta--secondary " target="_blank" name="match-report-highlights">
            <p>match report &amp; highlights</p>
        </a>

    </div>

    <div class="fixture-card__match-status"><img src="/assets/images/icon-warning.svg" alt="" /> Match postponed</div>
</article>

#Last 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": "Last match",
  "subTitle": "euro 2021 group stage",
  "location": "wembley stadium, england",
  "date": "sat 14 june 2020",
  "homeTeam": {
    "name": "England",
    "score": "0"
  },
  "awayTeam": {
    "name": "Iceland",
    "score": "0"
  },
  "timer": {
    "hours": "20",
    "minutes": "00"
  },
  "cta": {
    "copy": "match report & highlights",
    "name": "match-report-highlights",
    "href": "https://ticketing.thefa.com/",
    "target": "_blank"
  },
  "postponed": true,
  "cancelled": false
}
  • Content: 
    /* This css module overwrites fixture-card styles as required */
.last-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%;
    }
  }

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

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

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

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

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

  padding: 1.3rem 0 0 0;

  &__score {
    font-size: 7.2rem;
    line-height: 5rem;
  }

  &__extra-info {
    margin-top: 0;
    color: $black;
    font-weight: bold;

    abbr,
    span {
      margin-bottom: $spacing-s;
    }
    span {
      text-transform: initial;
    }
  }

  @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;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/last-match-card/last-match-card.scss
  • Filesystem Path: src/library/components/last-match-card/last-match-card.scss
  • Size: 1.6 KB 
<article class="last-match-card fixture-card">

  <div class="last-match-card__fixture-info fixture-card__fixture-info">
    <h3 class="last-match-card__title">
      {{title}}
    </h3>
    <p class="last-match-card__subtitle fixture-card__tournament">
      {{subTitle}}
    </p>
    <span class="last-match-card__location fixture-card__location">{{location}}</span>
    <span class="last-match-card__location fixture-card__location">{{date}}</span>
  </div>

  <div class="last-match-fixture-detail fixture-detail--result">
    <p class="visually-hidden">Results</p>
    <p class="last-match-fixture-detail__col fixture-detail__col">
      <span class="last-match-fixture-detail__team fixture-detail__team">
        <img src="/assets/example-content/crest-england.svg" alt="{{homeTeam.name}}" />{{homeTeam.name}}</span>
      {{#if homeTeam.score}}<span class="last-match-fixture-detail__score fixture-detail__score">{{homeTeam.score}}</span>{{/if}}
    </p>
    <p class="last-match-fixture-detail__col fixture-detail__col">
      <span class="last-match-fixture-detail__team fixture-detail__team">
        <img src="/assets/example-content/crest-iceland.png" alt="{{awayTeam.name}}" />{{awayTeam.name}}</span>
      {{#if awayTeam.score}}<span class="last-match-fixture-detail__score fixture-detail__score">{{awayTeam.score}}</span>{{/if}}
    </p>
    <p class="last-match-fixture-detail__extra-info fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
      penalties</span></p>
  </div>

  {{#unless cancelled}}
  <div class="last-match-card__ctas fixture-card__ctas">
    {{render '@cta--secondary' cta merge="true"}}
  </div>
  {{/unless}}

  {{#if cancelled}}
  <div class="fixture-card__match-status fixture-card__match-status--cancelled"><img src="/assets/images/icon-warning.svg" alt="" /> Match cancelled</div>
  {{/if}}

  {{#if postponed}}
  <div class="fixture-card__match-status"><img src="/assets/images/icon-warning.svg"
      alt="" /> Match postponed</div>
  {{/if}}
</article>