England Football

Legends Player Profile: With One Stat 

<div class="legends-player-profile">
    <div class="player-profile">
        <div class="player-profile__img-wrapper">
            <img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
            <div class="player-profile__caps-info">
                <span class="player-profile__caps-info--value">127</span>
                <span class="player-profile__caps-info--label">caps</span>
            </div>
            <div class="player-profile__stats">
                <div class="stats">
                    <p class="text-xs ">Games managed</p>
                    <p class="value">39</p>
                </div>

                <div class="info">
                    <p class="text-xs ">Legacy No.</p>
                    <p class="value">1028</p>
                </div>
            </div>
        </div>
        <a href='http://www.google.com' class="player-name">Gordon
            <div>
                <span class="player-name__lastname">Banks</span>
            </div>
            <span class="player-name__active-year">Active 8888-8888</span>
        </a>
    </div>

</div>

No notes defined.

{
  "legends": true,
  "firstName": "Gordon",
  "lastName": "Banks",
  "image": "/assets/example-content/player-holder-bkgnd.png",
  "activeYear": "Active 8888-8888",
  "stats": [
    {
      "title": {
        "copy": "Games managed"
      },
      "value": {
        "copy": "39"
      }
    }
  ],
  "info": [
    {
      "title": {
        "copy": "Legacy No."
      },
      "value": {
        "copy": "1028"
      }
    }
  ]
}
  • Content: 
    .legends-player-profile {
  .player-profile {
    max-width: 25rem;
    &__img-wrapper {
      width: 14.6rem;
      height: 20.1rem;
      &::before {
        background: transparent;
      }

      img {
        width: 12.7rem;
        height: 17.4rem;
        position: absolute;
      }
    }
    &__caps-info {
      position: absolute;
      color: $white;
      right: 2rem;
      top: 2rem;
      font-family: $teams-font;
      letter-spacing: 0.01em;
      opacity: 1;
      transition: opacity 0.3s ease-in;
      display: none;
      &--value {
        font-size: 6rem;
        display: block;
        font-style: normal;
        line-height: 5.8rem;
        text-align: right;
        color: $white;
      }
      &--label {
        font-size: 3.2rem;
        line-height: 5.8rem;
        display: flex;
        align-items: center;
        text-align: center;
        letter-spacing: 0.01em;
        color: $white;
        justify-content: center;
        opacity: 0.7;
        margin-top: -1.7rem;
      }
    }
    &__stats {
      display: none;
      .text-xs {
        line-height: 1.8rem;
        max-width: 6.4rem;
        white-space: break-spaces;
        text-align: center;
        font-size: 1.4rem;
      }
      .info {
        left: 7rem;
        background: $white;
        color: $blue;
        p {
          letter-spacing: 0.01rem;
        }
        .text-xs {
          line-height: 1.2rem;
          max-width: initial;
        }
      }
    }
    &:hover,
    &:focus-within {
      .player-profile__img-wrapper {
        background-color: transparent;
        img {
          transform: scale(1.15) !important;
        }
      }
      .player-profile__caps-info {
        opacity: 0;
      }
    }
    .player-name {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: $white;
      padding: 0.8rem 0;
      line-height: 1.4rem;
      letter-spacing: 0.01em;

      &__lastname {
        font-size: 5.8rem;
        line-height: 4.1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
      &__active-year {
        @include text-s--narrow;

        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 14px;
        color: #9d8d72;
      }
      &::after {
        margin: 0.8rem auto 0 auto;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    .player-profile {
      max-width: 25rem;
      &__img-wrapper {
        width: 25rem;
        height: 34.2rem;
        img {
          width: 23.4rem;
          height: 32rem;
        }
      }
      &__caps-info {
        display: block;
        margin-top: 0.8rem;
      }
      &__stats {
        display: flex;
        background: linear-gradient(
          180deg,
          rgba(47, 46, 46, 0.64) 0%,
          rgba(36, 37, 38, 0.64) 100%
        );
      }
      .player-name {
        padding: 1.6rem 0;
      }
    }
  }
}
  • URL: /components/raw/legends-player-profile/legends-player-profile.scss
  • Filesystem Path: src/library/components/legends-player-profile/legends-player-profile.scss
  • Size: 3 KB 
{{#if legends-filter}}
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":{{legends-filter.allsquad}}, "menssenior":{{legends-filter.menssenior}}, "womenssenior":{{legends-filter.womenssenior}}, "para":{{legends-filter.para}}, "futsal":{{legends-filter.futsal}}, "allgenders":{{legends-filter.allgenders}}, "male":{{legends-filter.male}}, "female":{{legends-filter.female}}, "allpositions":{{legends-filter.allpositions}}, "goalkeeper":{{legends-filter.goalkeeper}}, "defender":{{legends-filter.defender}}, "midfielder":{{legends-filter.midfielder}}, "forward":{{legends-filter.forward}} }'>
    {{render '@player-profile' this merge="true" }}
</div>
{{else}}
<div class="legends-player-profile">
    {{render '@player-profile' this merge="true" }}
</div>
{{/if}}