England Football

Content Manageable Banner 

<div class="content-managable-banner">
    <div class="content-managable-banner__heading-block">
        <h1 class="content-managable-banner__heading">Youth teams</h1>
        <ul>
            <li>
                <noscript class="loading-lazy">
                    <img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
                </noscript>
            </li>
            <li>
                <noscript class="loading-lazy">
                    <img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
                </noscript>
            </li>
            <li>
                <noscript class="loading-lazy">
                    <img src="/assets/example-content/red-lion-small.svg" alt="" loading="lazy" />
                </noscript>
            </li>
        </ul>
    </div>
    <p class="content-managable-banner__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.</p>
</div>

No notes defined.

{
  "heading": "Youth teams",
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitudin sed, faucibus id sapien. Cras porta condimentum turpis, quis tincidunt turpis tempus ut.",
  "image": "/assets/example-content/red-lion-small.svg"
}
  • Content: 
    .content-managable-banner {
  position: relative;
  text-align: center;
  padding: 4.8rem 1.6rem 2.4rem 1.6rem;

  .logo {
    position: fixed;
    right: 6rem;
    top: 12.9rem;

    @media (max-width: 629px) {
      display: none;
    }
  }
  &__heading-block {
    position: relative;
  }
  &__heading {
    font-family: $heading-font;
    font-size: 9rem;
    line-height: 7rem;
    color: $crest-blue;
    text-transform: uppercase;
    margin-bottom: 3.2rem;
  }
  &__copy {
    @extend .p-1;

    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 400;
    max-width: 31.5rem;
    margin: 0 auto;
  }
  ul {
    display: flex;
    justify-content: center;
    column-gap: 7rem;
    position: absolute;
    top: calc(50% - 1.5rem);
    left: 0;
    right: 0;
    li {
      max-width: 7rem;
    }
  }

  @media screen and (min-width: $mq-medium) {
    padding: 6.2rem 0 4.8rem 0;
    max-width: 140rem;
    margin: 0 auto;
    width: 100%;
    &__heading {
      font-size: 23rem;
      line-height: 19rem;
      margin-bottom: 5.4rem;
    }
    &__copy {
      max-width: 68.2rem;
    }
    ul {
      top: calc(50% - 4.2rem);
      column-gap: 19rem;
      li {
        max-width: 19.3rem;
      }
    }
  }
}

[data-brand=''],
[data-brand='englandfootball'],
[data-brand='englandfootball--supplimentary'] {
  .content-managable-banner {
    &__heading {
      font-family: $ef-font;
      font-size: 4.2rem;
      line-height: 4rem;
      margin-bottom: 1.6rem;
      font-weight: bold;
      font-style: italic;
      color: var(--brand-primary);
    }
    &__copy {
      @include text-m;

      font-family: $ef-font;
      line-height: 2.2rem;
    }
    ul {
      display: none;
    }

    @media screen and (min-width: $mq-medium) {
      &__heading {
        font-size: 10.8rem;
        line-height: 9rem;
        margin-bottom: 2.4rem;
      }
    }
  }
}
  • URL: /components/raw/content-manageable-banner/content-manageable-banner.scss
  • Filesystem Path: src/library/components/content-manageable-banner/content-manageable-banner.scss
  • Size: 1.9 KB 
<div class="content-managable-banner">
    <div class="content-managable-banner__heading-block">
        <h1 class="content-managable-banner__heading">{{heading}}</h1>
        <ul>
            <li>
                <noscript class="loading-lazy">
                    <img src="{{image}}" alt="" loading="lazy" />
                </noscript>
            </li>
            <li>
                <noscript class="loading-lazy">
                    <img src="{{image}}" alt="" loading="lazy" />
                </noscript>
            </li>
            <li>
                <noscript class="loading-lazy">
                    <img src="{{image}}" alt="" loading="lazy" />
                </noscript>
            </li>
        </ul>
    </div>
    <p class="content-managable-banner__copy">{{copy}}</p>
</div>