England Football

Legends Player Profile List 

<div id="" class="player-profile-list legends-player-profile-list" role="region" aria-label="150+">
    <h2 class="player-profile-list__title">150+
        <span class="player-profile-list__title2"></span>
    </h2>
    <div class="player-profile-list__players">
        <div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":true, "womens":false, "para":false, "fustal":false, "link":false }'>
            <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 ">Senior caps</p>
                            <p class="value">6</p>
                        </div>
                        <div class="stats">
                            <p class="text-xs ">Senior goals</p>
                            <p class="value">2</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">test
                    <span class="player-name__lastname">Banks</span>
                    <span class="player-name__active-year">Active 8888-8888</span>
                </a>
            </div>

        </div>

        <div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
            <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 ">Senior caps</p>
                            <p class="value">6</p>
                        </div>
                        <div class="stats">
                            <p class="text-xs ">Senior goals</p>
                            <p class="value">2</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
                    <span class="player-name__lastname">Banks</span>
                    <span class="player-name__active-year">Active 8888-8888</span>
                </a>
            </div>

        </div>

        <div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":true, "link":false }'>
            <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 ">Senior goals</p>
                            <p class="value">1</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
                    <span class="player-name__lastname">Banks</span>
                    <span class="player-name__active-year">Active 8888-8888</span>
                </a>
            </div>

        </div>

        <div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":true, "fustal":false, "link":false }'>
            <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 ">Senior goals</p>
                            <p class="value">1</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
                    <span class="player-name__lastname">Banks</span>
                    <span class="player-name__active-year">Active 8888-8888</span>
                </a>
            </div>

        </div>

        <div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
            <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 ">Senior caps</p>
                            <p class="value">6</p>
                        </div>
                        <div class="stats">
                            <p class="text-xs ">Senior goals</p>
                            <p class="value">2</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">test
                    <span class="player-name__lastname">Banks</span>
                    <span class="player-name__active-year">Active 8888-8888</span>
                </a>
            </div>

        </div>

    </div>
</div>

No notes defined.

{
  "title": {
    "copy": "150+",
    "extraClasses": "player-profile-list__title"
  },
  "players": [
    {
      "legends-filter": {
        "all": "true",
        "mens": "true",
        "womens": "false",
        "para": "false",
        "fustal": "false",
        "link": "false"
      },
      "firstName": "test"
    },
    {
      "legends-filter": {
        "all": "true",
        "mens": "false",
        "womens": "false",
        "para": "false",
        "fustal": "false",
        "link": "false"
      },
      "image": "/assets/example-content/player-holder-bkgnd.png"
    },
    {
      "legends-filter": {
        "all": "false",
        "mens": "false",
        "womens": "false",
        "para": "false",
        "fustal": "true",
        "link": "false"
      },
      "image": "/assets/example-content/player-holder-bkgnd.png",
      "stats": [
        {
          "title": {
            "copy": "Senior goals"
          },
          "value": {
            "copy": "1"
          }
        }
      ]
    },
    {
      "legends-filter": {
        "all": "true",
        "mens": "false",
        "womens": "false",
        "para": "true",
        "fustal": "false",
        "link": "false"
      },
      "image": "/assets/example-content/player-holder-bkgnd.png",
      "stats": [
        {
          "title": {
            "copy": "Senior goals"
          },
          "value": {
            "copy": "1"
          }
        }
      ]
    },
    {
      "legends-filter": {
        "all": "false",
        "mens": "false",
        "womens": "false",
        "para": "false",
        "fustal": "false",
        "link": "false"
      },
      "firstName": "test"
    }
  ]
}
  • Content: 
    .legends-player-profile-list {
  margin-top: 7.2rem;

  @media screen and (max-width: $mq-small) {
    &.player-profile-list {
      .player-profile-list__players {
        flex-direction: column;
      }
      .player-profile__img-wrapper {
        img {
          object-fit: cover;
          align-self: center;
        }
      }
      .player-name {
        width: calc(100% - 16.5rem);
        &__lastname {
          font-size: 5.6rem;
          line-height: 4.7rem;
        }
        &__active-year {
          font-size: 1.2rem;
          line-height: 1.2rem;
        }
      }
      .player-profile__caps-info {
        display: block;
        right: 1.1rem;
        top: -0.5rem;
        &--value {
          font-size: 5rem;
        }
        &--label {
          font-size: 2.8rem;
        }
      }
    }
    .player-profile {
      flex-direction: row-reverse;
      max-width: 34.3rem;
      /* stylelint-disable no-descending-specificity */
      &__img-wrapper {
        width: 16.5rem;
        height: 12.8rem;
        max-width: 16.5rem;
        max-height: 12.8rem;
      }
    }
  }
}
  • URL: /components/raw/legends-player-profile-list/legends-player-profile-list.scss
  • Filesystem Path: src/library/components/legends-player-profile-list/legends-player-profile-list.scss
  • Size: 1.1 KB 
<div id="{{id}}" class="player-profile-list legends-player-profile-list" role="region" aria-label="{{title.copy}}">
  <h2 class="player-profile-list__title">{{title.copy}}
    <span class="player-profile-list__title2">{{title.copy2}}</span>
  </h2>
  <div class="player-profile-list__players">
    {{#each players}}
    {{render '@legends-player-profile' this merge="true" }}
    {{/each}}
  </div>
</div>