England Football

Player Name 

<h1 class="player-name">Callum
    <div>
        <span class="player-name__lastname">Hudson-Odoi</span>
    </div>
</h1>

No notes defined.

{
  "tag": "h1",
  "firstName": "Callum",
  "lastName": "Hudson-Odoi"
}
  • Content: 
    // TODO: Replace colors with brand color when decided

.player-name {
  color: var(--brand-primary);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;

  @include text-s--narrow;

  line-height: 1.4rem;
  letter-spacing: 0.01em;

  &__lastname {
    @include heading-l;

    font-size: 5.8rem;
    line-height: 4.1rem;
    display: block;
    margin-top: 0.2rem;
  }

  &::after {
    content: '';
    display: block;
    margin: $spacing-m auto 0 auto;
    background-color: $red-dark;
    height: 0.2rem;
    width: 1.3rem;
    transition: width 0.3s ease-in-out;
  }
}
:root [data-brand='legends'] {
  .player-name {
    color: $white;
    &::after {
      background-color: $bold-red;
    }
  }
}
  • URL: /components/raw/player-name/player-name.scss
  • Filesystem Path: src/library/components/player-name/player-name.scss
  • Size: 727 Bytes 
<{{tag}} {{{attrs}}} class="player-name">{{firstName}} 
<div>
    <span class="player-name__lastname">{{lastName}}</span> 
</div>
{{#if legends}}
<span class="player-name__active-year">{{activeYear}}</span>
{{/if}}
</{{tag}}>