England Football

Match Result 

<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>

No notes defined.

{
  "team1": "GER",
  "team2": "ENG",
  "teamGoal1": "2",
  "teamGoal2": "3",
  "teamLogo1": "/assets/example-content/germany-flag.png",
  "teamLogo2": "/assets/example-content/england-flag.png",
  "htText": "HT: 8-8"
}
  • Content: 
    .match-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;

  &__team {
    font-family: $heading-font;
    font-size: 4rem;
    line-height: 3.4rem;
    letter-spacing: 0.01rem;
    color: $blue-accent2;
    margin: $spacing-s auto;
    text-align: center;

    img {
      max-width: 5.7rem;
      max-height: 4.2rem;
      display: inline-block;
    }
    span {
      display: block;
    }
  }
  &__score {
    background: $blue-accent;
    font-family: $text-font;
    font-size: 3.3rem;
    line-height: 3.3rem;
    color: $white;
    text-align: center;
    white-space: nowrap;
    padding: 2rem 1.6rem;
    letter-spacing: 0.04rem;

    & + span {
      font-family: $text-font2;
      font-size: 1.2rem;
      line-height: 1.3rem;
      letter-spacing: 0.01em;
      color: rgba(91, 104, 133, 0.5);
      display: block;
      margin-top: 0.8rem;
      text-align: center;
    }
  }
}
  • URL: /components/raw/match-result/match-result.scss
  • Filesystem Path: src/library/components/match-result/match-result.scss
  • Size: 937 Bytes 
<div class="match-result">
  <div class="match-result__team">
    <img src="{{teamLogo1}}" alt="" />
    <span>{{team1}}</span>
  </div>
  <div>
    <div class="match-result__score">{{teamGoal1}} - {{teamGoal2}}</div>
    <span>{{htText}}</span>
  </div>
  <div class="match-result__team">
    <img src="{{teamLogo2}}" alt="" />
    <span>{{team2}}</span>
  </div>
</div>