England Football

Player Card 

<article class="player-card">
    <img class="player-card__image" src="/assets/example-content/player-card.jpg" />
    <div class="player-card__info">
        <img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
        <h1 class="player-name">Callum
            <div>
                <span class="player-name__lastname">Hudson-Odoi</span>
            </div>
        </h1>
        <dl class="stat-list ">
            <div>
                <dt>Age</dt>
                <dd>20 years</dd>
            </div>
            <div>
                <dt>Position</dt>
                <dd>Forward</dd>
            </div>
            <div>
                <dt>Legacy number</dt>
                <dd>1234567890</dd>
            </div>
        </dl>

        <a href="/" class="text-xs player-card__cta">View Callum's profile</a>
    </div>
</article>

No notes defined.

{
  "image": "/assets/example-content/player-card.jpg",
  "firstName": "Callum",
  "lastName": "Hudson-Odoi",
  "stats-list": {
    "full-width": false,
    "stats": [
      {
        "label": "Age",
        "value": "20 years"
      },
      {
        "label": "Position",
        "value": "Forward"
      },
      {
        "label": "Legacy number",
        "value": "1234567890"
      }
    ]
  }
}
  • Content: 
    .team {
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #eee;
  padding: 1.1rem;
  max-height: 5.6rem;
  max-width: 5.6rem;
}

.player-card {
  $info-top-padding: 3.3rem;

  max-width: 27.4rem;
  position: relative;
  margin: 2.5rem 1.2rem 2.4rem 0;
  border-radius: 0.4rem;
  transition: box-shadow 0.3s ease-in-out;

  .player-name {
    line-height: 1.4rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    &::after {
      margin-top: 0.4rem;
    }
  }
  .player-name__lastname {
    font-size: 5.8rem;
    line-height: 4.1rem;
  }
  &__image {
    border-radius: $border-radius $border-radius 0 0;
  }

  &__info {
    border-radius: 0 0 $border-radius $border-radius;
    border: 1px solid $grey-light1;
    padding: $info-top-padding 1.2rem 1.2rem;
    margin-bottom: -1px;
  }

  &__team {
    left: 50%;
    position: absolute;
    transform: translate(-50%, calc(-50% - #{$info-top-padding}));
  }

  &__underline {
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: $alizarincrimson;
    border-radius: 0 0 4px 4px;
    bottom: 0;
    display: none;
  }

  &__cta {
    color: var(--brand-primary);
    display: block;
    margin-top: $spacing-m;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    font-weight: bold;

    // Add a pseudo element to make the whole card clickable
    // More info available here: https://inclusive-components.design/cards/
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }

  &:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  }
  .stat-list {
    display: block;
  }

  @media screen and (min-width: $mq-medium) {
    margin-top: 3.6rem;
  }
}
  • URL: /components/raw/player-card/player-card.scss
  • Filesystem Path: src/library/components/player-card/player-card.scss
  • Size: 1.8 KB 
<article class="player-card">
  <img class="player-card__image" src="{{image}}" />
  <div class="player-card__info">
    <img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
    {{render '@player-name' this merge="true" }}
    {{render '@stat-list' stats-list merge="true"}}
    <a href="/" class="text-xs player-card__cta">View {{firstName}}'s profile</a>
  </div>
</article>