England Football

Stat List 

<dl class="stat-list stat-list--full-width">
    <div>
        <dt>Legacy Number</dt>
        <dd>123456</dd>
    </div>
    <div>
        <dt>DOB</dt>
        <dd>28 July 1993 (27 Yrs)</dd>
    </div>
    <div>
        <dt>Height</dt>
        <dd>6ft 2&quot; (188cm)</dd>
    </div>
    <div>
        <dt>Preferred foot</dt>
        <dd>right</dd>
    </div>
    <div>
        <dt>Place of birth</dt>
        <dd>London, England</dd>
    </div>
    <div>
        <dt>Current club</dt>
        <dd>Tottenham Hotspur FC</dd>
    </div>
    <div>
        <dt>England debut</dt>
        <dd>27 March 2015</dd>
    </div>
    <div>
        <dt>Senior caps</dt>
        <dd>52</dd>
    </div>
    <div>
        <dt>Senior goals/ clean sheets</dt>
        <dd>33</dd>
    </div>
</dl>

No notes defined.

{
  "full-width": true,
  "stats": [
    {
      "label": "Legacy Number",
      "value": "123456"
    },
    {
      "label": "DOB",
      "value": "28 July 1993 (27 Yrs)"
    },
    {
      "label": "Height",
      "value": "6ft 2\" (188cm)"
    },
    {
      "label": "Preferred foot",
      "value": "right"
    },
    {
      "label": "Place of birth",
      "value": "London, England"
    },
    {
      "label": "Current club",
      "value": "Tottenham Hotspur FC"
    },
    {
      "label": "England debut",
      "value": "27 March 2015"
    },
    {
      "label": "Senior caps",
      "value": "52"
    },
    {
      "label": "Senior goals/ clean sheets",
      "value": "33"
    }
  ]
}
  • Content: 
    .stat-list {
  @include text-xs;

  div {
    align-items: flex-end;
    color: $color-interface-light;
    border-bottom: 1px solid $color-borders;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    padding-top: 1.2rem;
    text-transform: uppercase;
  }
  dd {
    text-align: right;
    color: $black;
    font-weight: 400;
  }

  &--full-width {
    @include text-s--narrow;

    div {
      padding-bottom: 1rem;
      padding-top: 1.6rem;
    }

    dt {
      color: var(--brand-primary);
    }
    dd {
      color: $color-primary;
    }
  }

  @media screen and (min-width: $mq-medium) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 6%;
  }

  @media screen and (min-width: $mq-large) {
    grid-template-columns: repeat(3, 1fr);
  }
}
  • URL: /components/raw/stat-list/stat-list.scss
  • Filesystem Path: src/library/components/stat-list/stat-list.scss
  • Size: 819 Bytes 
<dl class="stat-list {{#if full-width}}stat-list--full-width{{/if}}">
  {{#each stats}}
  <div>
    <dt>{{this.label}}</dt>
    <dd>{{this.value}}</dd>
  </div>
  {{/each}}
</dl>