England Football

Container 

<div style="background-color: blue; padding: 20px;">
    <div class="container" style="background-color: white;height: 300px;">
        <div class="container__content">

            <div class="container__header">
                <h2 class="heading-section ">This is the heading used to top a section</h2>
                <div class="inline-sponsor">
                    Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
                </div>
                <p class="text-m container__subtitle">Subtitle copy goes here.</p>
            </div>
            <p class="heading-m">CONTENT GOES HERE</p>
            <p class="text-m">⚠️ This template is an example of the container component. The container provides:</p>
            <ul class="text-m">
                <li>-A centred block with left and right padding</li>
                <li>- Rounded corners.</li>
            </ul>
            <p class="text-m">It does not provide:</p>
            <ul class="text-m">
                <li>- Colours. Heights.</li>
            </ul>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    .container {
  max-width: 140rem;
  margin: auto;
  overflow: hidden;
  width: 100%;

  &__header {
    position: relative;

    .inline-sponsor {
      justify-content: center;
      margin: $spacing-l 0;
    }
  }

  &__subtitle {
    text-align: center;
    color: $color-interface-light;
  }

  &__content {
    padding-left: $spacing-m;
    padding-right: $spacing-m;
  }

  @media screen and (min-width: $mq-small) {
    &__header {
      .inline-sponsor {
        margin: 0;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    &__subtitle {
      margin-top: $spacing-m;
    }
  }

  @media (min-width: $mq-medium) {
    &__content {
      padding-left: 9.2%;
      padding-right: 9.2%;
    }
  }
}
  • URL: /components/raw/container/container.scss
  • Filesystem Path: src/library/components/container/container.scss
  • Size: 773 Bytes 
{{!-- THIS TEMPLATE IS INTENDED FOR ILLUSTRATIVE PURPOSES ONLY --}}
{{!-- While it could be used as a partial, it is not recommended --}}

{{#unless content}}<div style="background-color: blue; padding: 20px;">{{/unless}}
  <div class="container" {{#unless content}} style="background-color: white;height: 300px;" {{/unless}}>
    <div class="container__content">
      {{ content }}
      {{#unless content}}
      <div class="container__header">
        {{render '@heading--section' heading merge=true}}
        {{render '@inline-sponsor'}}
        <p class="text-m container__subtitle">Subtitle copy goes here.</p>
      </div>
      <p class="heading-m">CONTENT GOES HERE</p>
      <p class="text-m">⚠️ This template is an example of the container component. The container provides:</p>
      <ul class="text-m">
        <li>-A centred block with left and right padding</li>
        <li>- Rounded corners.</li>
      </ul>
      <p class="text-m">It does not provide:</p>
      <ul class="text-m">
        <li>- Colours. Heights.</li>
      </ul>
      {{/unless}}
    </div>
  </div>
  {{#unless content}}
</div>{{/unless}}