England Football

Hero Image Banner: With Hero Xxl Styles 

<div class="banner banner--xxl banner--gradient">
    <picture>
        <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
        <source media="(min-width: 600px)" srcset="/assets/example-content/womens-hero.png">
        <img src="/assets/example-content/womens-hero.png" alt="">
    </picture>
    <div class="hero-overlay ">
        <div class="hero-overlay--gradient"></div>
        <div class="hero-overlay__content">
            <div class="hero-overlay__tag">Tag for content</div>
            <h1 class="hero-overlay__title">
                Lorem ipsumd
            </h1>
            <div class="hero-overlay__subtitle">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </div>
            <div class="hero-overlay__cta-btn">
                <a class="cta cta--tertiary cta--inline" href="/">Button cta</a>
            </div>
        </div>
    </div>
</div>

Hero banner image

Both the hero image banner and the image on the hero video banner have the same logic:

  • Mobile and desktop size images are expected to be provided
  • In the future these images could be better cropped to provide different aspect ratios for each size, but for now they are the same.
  • Because the images provided should be landscape, on mobile we adjust the aspect ratio shown by centering the image and cropping the sides.
  • On desktop we center the image and have a maximum height. This means that the top and bottom are cropped on extra wide screens.
  • Because of the above, the images should be carefully art directed to make sure cropping the edges does not affect the impact of the image.
{
  "smallimage": "/assets/example-content/womens-hero-600.png",
  "bigimage": "/assets/example-content/womens-hero.png",
  "overlay": {
    "xlstyle": false,
    "xxlstyle": true,
    "title": "Lorem ipsumd"
  },
  "modifier": "gradient",
  "stylemodifier": "xxl",
  "with-overlay": true
}
  • Content: 
    .banner {
  position: relative;

  img {
    // used for smaller devices
    height: 640px;
    object-fit: cover;
    object-position: center;
    max-height: 700px;
    width: 100%;
  }

  @media screen and (min-width: 1200px) {
    img {
      height: 100%;
    }
  }

  &--gradient {
    position: relative;

    &::after {
      background: linear-gradient(
        180deg,
        rgba(var(--brand-primary-rgb), 0) 0%,
        rgba(var(--brand-primary-rgb), 0.14) 54.17%,
        var(--brand-primary) 94.79%
      );
      bottom: 0;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}
  • URL: /components/raw/hero-image-banner/hero-image-banner.scss
  • Filesystem Path: src/library/modules/hero-banner/hero-image-banner/hero-image-banner.scss
  • Size: 672 Bytes 
<div class="banner {{#if stylemodifier}}banner--{{stylemodifier}}{{/if}} {{#if modifier}}banner--{{modifier}}{{/if}}">
  <picture>
    <source media="(max-width: 600px)" srcset="{{smallimage}}">
    <source media="(min-width: 600px)" srcset="{{bigimage}}">
    <img src="{{bigimage}}" alt="">
  </picture>
  {{#if with-overlay}}
  {{render '@hero-overlay' overlay merge="true"}}
  {{/if}}
  </div>