England Football

Squad Players 

<div class="squad-players">
    <div class="squad-players__position">GOALKEEPERS</div>
    <div class="squad-players__list">
        <ul>
            <a href="/">
                <li>
                    <img src="/assets/example-content/player-stats-small-1.png" />
                    <p>TRENT <span>Alexander-Arnold</span></p>
                </li>
            </a>
            <a href="/">
                <li>
                    <img src="/assets/example-content/player-stats-small-1.png" />
                    <p>TRENT <span>Alexander-Arnold</span></p>
                </li>
            </a>
            <a href="/">
                <li>
                    <img src="/assets/example-content/player-stats-small-1.png" />
                    <p>TRENT <span>Alexander-Arnold</span></p>
                </li>
            </a>
        </ul>
    </div>
</div>

No notes defined.

{
  "title": "GOALKEEPERS",
  "playerCard": [
    {
      "href": "/",
      "image": "/assets/example-content/player-stats-small-1.png",
      "firstname": "TRENT",
      "lastname": "Alexander-Arnold"
    },
    {
      "href": "/",
      "image": "/assets/example-content/player-stats-small-1.png",
      "firstname": "TRENT",
      "lastname": "Alexander-Arnold"
    },
    {
      "href": "/",
      "image": "/assets/example-content/player-stats-small-1.png",
      "firstname": "TRENT",
      "lastname": "Alexander-Arnold"
    }
  ]
}
  • Content: 
    .squad-players {
  position: relative;

  &__position {
    @include text-s;

    font-family: $text-font-ef;
    font-size: 2.8rem;
    font-weight: 500;
    color: $red;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  &__list li {
    display: flex;
    flex-direction: row;
    grid-gap: 1.2rem;
    margin: 0;
    align-items: center;
    padding: 0.8rem 0;
    border: 2px solid transparent;

    &:focus {
      border: 2px solid $color-interface-light;
      padding-left: 2rem;
    }
  }

  &__list li img {
    max-width: 2rem;
    max-height: 2rem;
    border-radius: 50%;
  }

  &__list a {
    text-decoration: none;
  }

  &__list li p {
    @include text-s;

    font-family: $text-font-ef;
    justify-self: start;
    color: $blue;
    text-transform: uppercase;
    width: 100%;
    max-width: 15.9rem;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    span {
      font-weight: bold;
    }

    &:hover {
      text-decoration: underline;
      color: $crest-blue;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__position {
      font-size: 2rem;
      text-align: start;
      margin-bottom: 2.2rem;
    }
  }
}
  • URL: /components/raw/squad-players/squad-players.scss
  • Filesystem Path: src/library/components/squad-players/squad-players.scss
  • Size: 1.3 KB 
<div class="squad-players">
    <div class="squad-players__position">{{title}}</div>
    <div class="squad-players__list">
        <ul>
            {{#each playerCard}}
            <a href="{{href}}">
                <li>
                    <img src="{{image}}" />
                    <p>{{firstname}} <span>{{lastname}}</span></p>
                </li>
            </a>
            {{/each}}
        </ul>
    </div>
</div>