England Football

Development Squad Caps 

<div class="development-squad-caps">
    <div class="development-squad-caps__title">DEVELOPMENT SQUAD CAPS</div>
    <ul class="development-squad-caps__content">
        <li>
            <div class="development-squad-caps__value">67</div>
            <div class="development-squad-caps__label">U16 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">8</div>
            <div class="development-squad-caps__label">U21 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">1</div>
            <div class="development-squad-caps__label">U19 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">12</div>
            <div class="development-squad-caps__label">U18 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">1</div>
            <div class="development-squad-caps__label">U17 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">0</div>
            <div class="development-squad-caps__label">U20 CAPS</div>
        </li>
    </ul>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    .development-squad-caps {
  margin-top: 5.7rem;
  text-transform: uppercase;
  border-bottom: 1px solid $grey-light;
  padding-bottom: 3.2rem;
  &__title {
    @include text-l;

    line-height: 1.8rem;
    letter-spacing: 0.01rem;
    color: $color-interface-light;
  }
  &__content {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    li {
      margin-top: 3.2rem;
      flex: 1 33.3%;
      max-width: 33.3%;
    }
  }
  &__value {
    font-family: $heading-font;
    font-size: 9.4rem;
    line-height: 6.6rem;
    letter-spacing: 0.01em;
    color: $color-interface-light;
  }
  &__label {
    @include text-s;

    line-height: 1.4rem;
    color: $blue;
    margin-top: 1.2rem;
  }

  @media screen and (min-width: $mq-medium) {
    &__content {
      li {
        flex: 1;
        max-width: auto;
      }
    }
  }
}
  • URL: /components/raw/development-squad-caps/development-squad-caps.scss
  • Filesystem Path: src/library/modules/development-squad-caps/development-squad-caps.scss
  • Size: 858 Bytes 
<div class="development-squad-caps">
    <div class="development-squad-caps__title">DEVELOPMENT SQUAD CAPS</div>
    <ul class="development-squad-caps__content">
        <li>
            <div class="development-squad-caps__value">67</div>
            <div class="development-squad-caps__label">U16 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">8</div>
            <div class="development-squad-caps__label">U21 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">1</div>
            <div class="development-squad-caps__label">U19 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">12</div>
            <div class="development-squad-caps__label">U18 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">1</div>
            <div class="development-squad-caps__label">U17 CAPS</div>
        </li>
        <li>
            <div class="development-squad-caps__value">0</div>
            <div class="development-squad-caps__label">U20 CAPS</div>
        </li>
    </ul>
</div>