England Football

Companion Container 

<div class="companion-container">
    <div class="companion-container__withouttab">
        <article class="fixture-card" data-filter='{ "filter": "competition", "name": "fifa", "id": "1" }' data-analytics='{"pagename":"England Football Landing page","matchcategory":"fixtures","matchtype":"Fifa world cup qatar 2022 Euro qualifier","matchmode":"Round of 16","matchdetail":"England Vs Iceland","matchvenue":"Khalifa International Stadium"}'>
            <div class="fixture-card__fixture-info">
                <p class="fixture-card__tournament">Fifa world cup qatar 2022 Euro qualifier
                    <span class="fixture-card__round">Round of 16</span>
                </p>
                <p class="fixture-card__location">Khalifa International Stadium</p>
                <p>Thurs 20th Feb <span>20:00 GMT</span></p>
            </div>
            <div class="fixture-detail">
                <p class="visually-hidden">Fixture</p>
                <p class="fixture-detail__col">
                    <span class="fixture-detail__team">
                        <img src="/assets/example-content/crest-england.svg" alt="" />England</span>
                </p>
                <p class="fixture-detail__col">
                    <span class="fixture-detail__team">
                        <img src="/assets/example-content/crest-iceland.png" alt="" />Iceland</span>
                </p>
                <p class="fixture-detail__time">20:00</p>
                <p class="fixture-detail__extra-info">
                    <img src="/assets/example-content/sponsor-logo-bt.svg" alt="BT Sport" />
                    <img src="/assets/example-content/logo-itv.png" alt="ITV" />
                </p>
            </div>
            <div class="fixture-card__ctas">
                <a href="/" class="cta cta--secondary " name="match-preview">
                    <p>Match preview</p>
                </a>

                <a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
                    <p>Buy tickets</p>
                </a>

            </div>
        </article>
    </div>
</div>

No notes defined.

{
  "withouttab": true
}
  • Content: 
    .companion-container {
  background: $white;
  border-radius: 4px;
  margin: 0 auto;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.05);
  width: 34.3rem;

  &__withouttab {
    padding: 0.8rem;
  }

  @media (min-width: $mq-medium) {
    width: 100%;
    max-width: 100rem;
    background: $white;
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.05);

    &__withouttab {
      margin: 0.3rem;
      padding: 1rem;
    }
  }

  @media screen and (min-device-width: 620px) and (max-device-width: 820px) {
    width: 100%;
    max-width: 50.3rem;
  }

  @media screen and (min-device-width: 820px) and (max-device-width: 1024px) {
    width: 100%;
    max-width: 80rem;
  }
}
  • URL: /components/raw/companion-container/companion-container.scss
  • Filesystem Path: src/library/components/companion-container/companion-container.scss
  • Size: 749 Bytes 
<div class="companion-container">
  <div class="companion-container__withouttab">
    {{render '@fixture-card'}}
  </div>
</div>