England Football

Fixture Result Card: Results 

<div class="fixture-result-card">
    <div class="fixture-result-card__title">Mens Senior</div>
    <div class="fixture-result-card__competition">
        <div>Euro Champions Qualifier</div>
        <span></span>
        <div>Group A</div>
    </div>
    <div class="fixture-result-card__team">
        <div class="fixture-result-card__hometeam">
            <img src="/assets/example-content/prematch-home-team.svg" alt="" />
            <p>Eng</p>
        </div>
        <div class="fixture-result-card__postmatch">
            <div class="fixture-result-card__matchscore">
                <div class="matchscore">
                    <div>3</div>
                    <span></span>
                    <div>1</div>
                </div>
            </div>
        </div>
        <div class="fixture-result-card__awayteam">
            <img src="/assets/example-content/prematch-away-team.svg" alt="" />
            <p>Ice</p>
        </div>
    </div>

    <div class="fixture-result-card__match-widgets">
        <div>ht: 1-1</div>
        <div>eng win on pens 4:3</div>
        <div></div>
    </div>

    <div class="fixture-result-card__match-cta">
        <a href="/" class="cta cta--primary ">
            <p>Match Report</p>
        </a>

        <a href="/" class="cta cta--tertiary ">
            <p>Highlights</p>
        </a>

    </div>

</div>

No notes defined.

{
  "title": "Mens Senior",
  "competitionName": "Euro Champions Qualifier",
  "groupName": "Group A",
  "matchDate": false,
  "homeTeam": "Eng",
  "awayTeam": "Ice",
  "prematch": false,
  "cta": {
    "copy": "Match Report"
  },
  "cta1": {
    "copy": "Highlights",
    "modifier": "tertiary"
  },
  "postmatch": {
    "homeTeamScore": "3",
    "awayTeamScore": "1",
    "htWidget": "ht: 1-1",
    "pensWidget": "eng win on pens 4:3",
    "etWidget": ""
  }
}
  • Content: 
    .fixture-result-card {
  position: relative;
  width: 33.6rem;
  height: 23.9rem;
  border: 0.1rem solid $grey-light;
  border-radius: 0.8rem;
  padding: 1.2rem 0 2.4rem 0;

  &__title {
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-align: center;
    text-transform: uppercase;
    color: $blue;
    margin-bottom: 0.8rem;

    &::after {
      content: '';
      width: 2.6rem;
      height: 0.1rem;
      background: $crest-blue;
      opacity: 0.9;
      margin: 0.4rem auto 0 auto;
      display: block;
    }
  }

  &__competition {
    font-family: $ef-font;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.2rem;
    letter-spacing: -0.01em;
    color: $color-interface-light;
    column-gap: 0.8rem;
    margin-bottom: 2rem;

    span {
      background: $blue;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
  }

  &__date {
    font-family: $ef-font;
    font-weight: 400;
    font-size: 1.4rem;
    font-style: normal;
    line-height: 2.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    letter-spacing: 0.02em;
    color: $color-interface-light;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
  }

  &__team {
    text-transform: uppercase;
    display: flex;
    margin-bottom: 0.4rem;
    align-items: center;
    justify-content: center;
  }

  &__hometeam {
    display: flex;
    padding-right: 1.2rem;
    flex-direction: row;
    align-items: center;
    column-gap: 1.7rem;

    img {
      max-height: 4.6rem;
      height: 100%;
      order: 0;
    }

    p {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 500;
      font-size: 2.2rem;
      line-height: 2.6rem;
      text-align: center;
      text-transform: uppercase;
      color: $blue;
      order: 1;
    }
  }

  &__awayteam {
    display: flex;
    padding-left: 1.2rem;
    flex-direction: row;
    align-items: center;
    column-gap: 1.7rem;

    img {
      max-height: 4.6rem;
      height: 100%;
      order: 1;
    }

    p {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 500;
      font-size: 2.2rem;
      line-height: 2.6rem;
      text-align: center;
      text-transform: uppercase;
      color: $blue;
      order: 0;
    }
  }

  &__prematch {
    background: $grey-light;
    border-radius: 0.4rem;
    padding: 0.4rem 1.6rem;
    align-self: center;

    .time {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.6rem;
      display: flex;
      align-items: center;
      text-align: center;
      letter-spacing: -0.03em;
      color: $blue;
    }

    .zone {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 1.2rem;
      text-align: center;
      letter-spacing: 0.01em;
      line-height: 2.6rem;
      color: $color-interface-light;
    }
  }

  &__postmatch {
    display: flex;
    flex-direction: column;
  }

  &__matchpostponed {
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    color: $blue;
    background: $grey-light;
    border-radius: 0.4rem;
    padding: 1.2rem 2.8rem;
    align-self: center;
  }

  &__matchsuspended {
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    color: $blue;
    background: $grey-light;
    border-radius: 0.4rem;
    padding: 1.2rem 2.8rem;
    align-self: center;
  }

  &__tbc {
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.03em;
    color: $color-interface-light;
    font-family: $ef-font;
    background: $grey-light;
    border-radius: 0.4rem;
    align-self: center;
    padding: 1.2rem 2.8rem;
  }

  &__matchscore {
    background: $crest-blue;
    border-radius: 0.4rem;
    padding: 1.2rem 1.4rem;
    align-self: center;

    .matchscore {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 2.4rem;
      line-height: 2.6rem;
      text-align: center;
      letter-spacing: -0.03em;
      color: $white;
    }

    span {
      background: $white;
      width: 0.7rem;
      height: 0.3rem;
      margin: 0 0.8rem;
    }
  }

  &__match-widgets {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: $ef-font;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.6rem;
    text-align: center;
    letter-spacing: 0.01em;
    color: $color-interface-light;
    row-gap: 0.4rem;
    margin-top: 0.8rem;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
  }

  &__match-cta {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: 0.8rem;
    column-gap: 0.8rem;
    bottom: 2rem;
    left: 0;
    right: 0;

    .cta--primary,
    .cta--secondary,
    .cta--tertiary {
      font-family: $ef-font;
      max-width: 14.7rem;
      min-height: 3.6rem;
      width: 100%;
    }

    .cta--tertiary:hover {
      border: 0.1rem solid;
    }
  }

  &__postponed-cta {
    padding: 0.9rem 0;
    margin: 1.6rem 2.4rem 0 2.4rem;
    background: $orange-light;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $red;
    text-transform: uppercase;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
  }

  &__suspended-cta {
    padding: 0.9rem 0;
    margin: 1.6rem 2.4rem 0 2.4rem;
    background: $orange-light;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $red;
    text-transform: uppercase;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
  }

  &__match-status {
    font-family: $ef-font;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: $color-interface-light;
    text-transform: uppercase;
    padding-top: 0.9rem;
  }

  &__tbc-cta {
    padding: 0.9rem 0;
    margin: 1.6rem 2.4rem 0 2.4rem;
    background: $grey;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $white;
    text-transform: uppercase;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
  }

  &__no-upcoming-matches {
    padding: 2.6rem 1.2rem 1.2rem 1.2rem;

    .no-match-text {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 2rem;
      text-align: center;
      letter-spacing: 0.02em;
      color: $color-interface-light;
      margin-bottom: 1.8rem;
      text-transform: uppercase;
    }
    img {
      max-height: 7.5rem;
      height: 100%;
      margin: 0 auto 1.4rem auto;
    }
    a {
      font-family: $ef-font;
      min-height: 3.7rem;
      margin: 0 2.4rem;
      position: absolute;
      bottom: 2rem;
      left: 0;
      right: 0;
    }
  }

  .one-fixture-result-cta a {
    max-width: 28.8rem;
  }
}
  • URL: /components/raw/fixture-result-card/fixture-result-card.scss
  • Filesystem Path: src/library/components/fixture-result-card/fixture-result-card.scss
  • Size: 8.4 KB 
<div class="fixture-result-card">
  {{#unless nomatches}}
  <div class="fixture-result-card__title">{{title}}</div>
  <div class="fixture-result-card__competition">
    <div>{{competitionName}}</div>
    <span></span>
    <div>{{groupName}}</div>
  </div>
  <div class="fixture-result-card__team">
    <div class="fixture-result-card__hometeam">
      <img src="/assets/example-content/prematch-home-team.svg" alt="" />
      <p>{{homeTeam}}</p>
    </div>
    {{#if prematch}}
    <div class="fixture-result-card__prematch">
      <p class="time">{{prematch.time}}</p>
      <p class="zone">{{prematch.zone}}</p>
    </div>
    {{/if}}
    {{#if postmatch}}
    <div class="fixture-result-card__postmatch">
      <div class="fixture-result-card__matchscore">
        <div class="matchscore">
          <div>{{postmatch.homeTeamScore}}</div>
          <span></span>
          <div>{{postmatch.awayTeamScore}}</div>
        </div>
      </div>
    </div>
    {{/if}}
    {{#if postponed}}
    <div class="fixture-result-card__matchpostponed">PP</div>
    {{/if}}
    {{#if suspended}}
    <div class="fixture-result-card__matchsuspended">SUS</div>
    {{/if}}
    {{#if tbc}}
    <div class="fixture-result-card__tbc">TBC</div>
    {{/if}}
    <div class="fixture-result-card__awayteam">
      <img src="/assets/example-content/prematch-away-team.svg" alt="" />
      <p>{{awayTeam}}</p>
    </div>
  </div>

  {{#if postmatch}}
  <div class="fixture-result-card__match-widgets">
    <div>{{postmatch.htWidget}}</div>
    <div>{{postmatch.pensWidget}}</div>
    <div>{{postmatch.etWidget}}</div>
  </div>
  {{/if}}

  {{#if matchDate}}
  <div class="fixture-result-card__date">{{matchDate}}</div>
  {{/if}}

  {{#unless matchstatus}}
  <div class="fixture-result-card__match-cta">
    {{render '@cta' cta merge="true"}}
    {{#if cta1}}
    {{render '@cta' cta1 merge="true"}}
    {{/if}}
  </div>
  {{/unless}}

  {{#if postponed}}
  <div class="fixture-result-card__match-status">Match Postponed</div>
  <div class="fixture-result-card__postponed-cta">
    Postponed
  </div>
  {{/if}}
  {{#if suspended}}
  <div class="fixture-result-card__match-status">Match Suspended</div>
  <div class="fixture-result-card__suspended-cta">
    Suspended
  </div>
  {{/if}}
  {{#if tbc}}
  <div class="fixture-result-card__match-status">Dates TBC</div>
  <div class="fixture-result-card__tbc-cta">
    TBC
  </div>
  {{/if}}
  {{/unless}}

  {{#if nomatches}}
  <div class="fixture-result-card__no-upcoming-matches">
    <div class="no-match-text">No Current Upcoming Matches</div>
    <img src="/assets/example-content/prematch-home-team.svg" alt="" />
    {{render '@cta' nomatchcta merge="true"}}
  </div>
  {{/if}}

</div>