England Football

Youth Squad List 

<section class="youth-squad-list">
    <div class="youth-squad-list__container">
        <div class="squad-profiles-wrapper">
            <div id="squad-block-goalkeepers" class="player-profile-youth-list" role="region" aria-label="Goalkeepers">
                <h2 class="player-profile-youth-list__title">Goalkeepers</h2>
                <div class="player-profile-youth-list__players">
                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth.png" alt="" />
                        </div>
                        <a class="player-name">test
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

            <div id="squad-block-defenders" class="player-profile-youth-list" role="region" aria-label="Defenders">
                <h2 class="player-profile-youth-list__title">Defenders</h2>
                <div class="player-profile-youth-list__players">
                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

            <div id="squad-block-midfielders" class="player-profile-youth-list" role="region" aria-label="Midfielders">
                <h2 class="player-profile-youth-list__title">Midfielders</h2>
                <div class="player-profile-youth-list__players">
                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

            <div id="squad-block-forwards" class="player-profile-youth-list" role="region" aria-label="Forwards">
                <h2 class="player-profile-youth-list__title">Forwards</h2>
                <div class="player-profile-youth-list__players">
                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                    <div class="player-profile-youth">
                        <div class="player-profile-youth__img-wrapper">
                            <img src="/assets/example-content/player-profile-youth-2.png" alt="" />
                        </div>
                        <a class="player-name">Tammy
                            <div>
                                <span class="player-name__lastname">Alexander</span>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>

No notes defined.

{
  "hide-sponsor": true,
  "roles": [
    {
      "title": {
        "copy": "Goalkeepers"
      },
      "id": "squad-block-goalkeepers"
    },
    {
      "title": {
        "copy": "Defenders"
      },
      "id": "squad-block-defenders",
      "players": [
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        }
      ]
    },
    {
      "title": {
        "copy": "Midfielders"
      },
      "id": "squad-block-midfielders",
      "players": [
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        }
      ]
    },
    {
      "title": {
        "copy": "Forwards"
      },
      "id": "squad-block-forwards",
      "players": [
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        },
        {
          "image": "/assets/example-content/player-profile-youth-2.png"
        }
      ]
    }
  ]
}
  • Content: 
    .youth-squad-list {
  &__container {
    padding-bottom: $spacing-s;
  }

  .player-profile-youth-list {
    margin: $spacing-xl 0;
    &__title.heading-l {
      color: $crest-blue;
    }
  }

  .inline-sponsor {
    justify-content: center;
  }

  @media (min-width: $mq-medium) {
    padding: $spacing-m;
  }

  @media (min-width: $mq-large) {
    &__container {
      padding-bottom: $spacing-xl;
    }
    .inline-sponsor {
      justify-content: flex-end;
      margin-bottom: $spacing-s;
    }
    .inline-sponsor + .player-profile-list {
      margin-top: 0;
    }
  }

  @media (min-width: $mq-large) {
    .white-space-lg {
      white-space: nowrap;
    }
  }
}

:root [data-brand='womens'] {
  .youth-squad-list {
    .player-profile-youth-list {
      &__title {
        color: #5b6885;
      }
    }
  }
}
  • URL: /components/raw/youth-squad-list/youth-squad-list.scss
  • Filesystem Path: src/library/modules/youth-squad-list/youth-squad-list.scss
  • Size: 820 Bytes 
<section class="youth-squad-list">
    <div class="youth-squad-list__container">
        <div class="squad-profiles-wrapper">
        {{#unless hide-sponsor}}
        {{render '@inline-sponsor'}}
        {{/unless}}
        {{#each roles}}
        {{render '@player-profile-youth-list' this merge="true" }}
        {{/each}}
        </div>
    </div>
</section>