England Football

Current Standings 

<section class="current-standings container" data-behavior="tabs">
    <div class="container__content">
        <div class="container__header">
            <h2 class="heading-section ">Current standings</h2>
            <div class="inline-sponsor">
                Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
            </div>
        </div>
        <div class="current-standings__info">
            <p class="text-m current-standings__competition-title">UEFA Euros 2021</p>
            <div role="tablist" aria-label="Current standings" class="tab-list">
                <a href="#panel-tree" role="tab" aria-selected="false" aria-controls="panel-tree" id="tab-tree" tabindex="0">
                    Tree
                </a>
                <a href="#panel-table" role="tab" aria-selected="true" aria-controls="panel-table" id="tab-table" tabindex="0">
                    Table
                </a>
            </div>
        </div>
        <div id="panel-tree" role="tabpanel" aria-labelledby="tab-tree" data-tab-label="Tree">
            <div class="tournament-standings">
                <opta-widget widget="tournament_tree" competition="4" season="2017" template="centralised" show_crests="true" show_third_place="true" show_goals_combined="false" date_format="lll" pre_match="false" show_competition_name="true" competition_naming="full" team_naming="full" show_live="false" show_logo="false" show_title="false" fixture_height="120" sport="football"></opta-widget>
            </div>
        </div>
        <div id="panel-table" role="tabpanel" aria-labelledby="tab-table" data-tab-label="Table">
            <div class="team-standings">
                <div class="team-standings__container">
                    <opta-widget widget="standings" competition="4" season="2017" template="normal" live="false" navigation="tabs" default_nav="1" side="combined" data_detail="full" show_key="true" show_crests="true" points_in_first_column="true" lose_before_draw="false" show_form="6" competition_naming="full" team_naming="full" date_format="dddd D MMMM YYYY" sorting="false" show_live="false" show_relegation_average="false" show_logo="false" show_title="false" breakpoints="500" sport="football">
                    </opta-widget>
                    <div class="team-standings__match-details">
                        <div class="team-standings__match-stats">
                            <ul class="team-standings__match-report">
                                <li class="win">Win</li>
                                <li class="draw">Draw</li>
                                <li class="loss">Loss</li>
                                <li class="notplayed">Not played</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="current-standings__cta">
            <a href="/" class="cta cta--primary ">
                <p>VIEW FIXTURES AND RESULTS</p>
            </a>

        </div>
    </div>
</section>

No notes defined.

{
  "heading": {
    "copy": "Current standings"
  },
  "competition": {
    "copy": "UEFA Euros 2021",
    "tag": "p",
    "additionalClasses": "current-standings__competition-title"
  },
  "cta": {
    "copy": "VIEW FIXTURES AND RESULTS"
  }
}
  • Content: 
    .current-standings {
  background-color: #fff;
  padding-top: $spacing-l;

  &__info {
    margin-top: $spacing-l;
  }

  &__cta {
    display: flex;
    align-items: center;
    padding-bottom: 1.8rem;

    a {
      flex: 1;
    }

    &::after,
    &::before {
      border-bottom: 1px solid #fff;
      content: '';
      flex: 1;
      height: 0;
      opacity: 0.2;
    }
    &::before {
      margin-right: $spacing-s;
    }
    &::after {
      margin-left: $spacing-s;
    }
  }
  .heading-l {
    text-align: center;
  }

  &__competition-title {
    font-size: 18px;
    color: $bold-red;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  @media screen and (max-width: $mq-small) {
    .heading-l {
      margin-bottom: $spacing-l;
    }
    &__competition-title {
      text-align: center;
      margin-bottom: $spacing-m;
      width: 100%;
    }
    .tab-list {
      width: 100%;
      margin-bottom: $spacing-s;
      flex-shrink: 0;
    }
  }

  @media screen and (min-width: $mq-small) {
    padding-top: $spacing-xxl;

    &__info {
      //display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__info {
      margin-bottom: 3.8rem;
    }
  }
}
  • URL: /components/raw/current-standings/current-standings.scss
  • Filesystem Path: src/library/modules/current-standings/current-standings.scss
  • Size: 1.3 KB 
<section class="current-standings container" data-behavior="tabs">
  <div class="container__content">
    <div class="container__header">
      {{render '@heading--section' heading merge=true}}
      {{render '@inline-sponsor'}}
    </div>
    <div class="current-standings__info">
      {{render '@text--m' competition merge=true}}
      <div role="tablist" aria-label="Current standings" class="tab-list">
        <a href="#panel-tree" role="tab" aria-selected="false" aria-controls="panel-tree" id="tab-tree" tabindex="0">
          Tree
        </a>
        <a href="#panel-table" role="tab" aria-selected="true" aria-controls="panel-table" id="tab-table" tabindex="0">
          Table
        </a>
      </div>
    </div>
    <div id="panel-tree" role="tabpanel" aria-labelledby="tab-tree" data-tab-label="Tree">
      {{render '@tournament-tree'}}
    </div>
    <div id="panel-table" role="tabpanel" aria-labelledby="tab-table" data-tab-label="Table">
      {{render '@team-standings'}}
    </div>
    <div class="current-standings__cta">
      {{render '@cta' cta merge=true }}
    </div>
  </div>
</section>