Greenhill Pattern Library v1.0

Homepage Hero 

<!-- put this in the <head> on this page only -->
<style>
    @media (min-width: 37.5em) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w769.jpg);
        }
        /* 769px wide image (covers up to next breakpoint) with a 16:9 aspect ratio */
    }

    @media only screen and (min-width: 37.5em) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 37.5em) and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-width: 37.5em) and (min-device-pixel-ratio: 1.5),
    only screen and (min-width: 37.5em) and (min-resolution: 1.5dppx) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w1538.jpg);
        }
        /* 1538 wide, 16:9; */
    }

    @media (min-width: 48em) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w960.jpg);
        }
        /* 960px wide image (covers up to next breakpoint) with a 16:9 aspect ratio */
    }

    @media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 48em) and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-width: 48em) and (min-device-pixel-ratio: 1.5),
    only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w1920.jpg);
        }
        /* 1920 wide, 16:9; */
    }

    @media (min-width: 60em) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagewide-w1100.jpg);
        }
        /* 1100px wide image with a 16:9 aspect ratio */
    }

    @media only screen and (min-width: 60em) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 60em) and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-width: 60em) and (min-device-pixel-ratio: 1.5),
    only screen and (min-width: 60em) and (min-resolution: 1.5dppx) {
        .banner-hero {
            background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagewide-w2200.jpg);
        }
        /* 2200 wide, 16:9; */
    }
</style>
<!-- end of stuff to go in the <head> -->

<article class="banner banner-hero">
    <a class="wrapping-anchor" href="/portfolio/case-studies/weref-app">
	<img srcset="https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w320.jpg 320w,
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w480.jpg 480w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w640.jpg 640w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w752.jpg 752w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w960.jpg 960w" sizes="100vw" src="https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow.jpg" alt="A player heading the ball in a football match">
    <div class="hero-detail">
    	<h3>Portfolio Feature</h3>
        <h2>we.ref</h2>
        <p>FIFA-approved game management technology for football referees, ushering in a new era for The Beautiful Game.</p>
        <span class="btn btn-more">Read story</span>
    </div>
	</a>
</article>
 
<!-- put this in the <head> on this page only -->
<style>
@media (min-width: 37.5em) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w769.jpg); } /* 769px wide image (covers up to next breakpoint) with a 16:9 aspect ratio */  
}
@media only screen and (min-width: 37.5em) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 37.5em) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 37.5em) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 37.5em) and (min-resolution: 1.5dppx) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w1538.jpg); } /* 1538 wide, 16:9; */ 
}

@media (min-width: 48em) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w960.jpg); } /* 960px wide image (covers up to next breakpoint) with a 16:9 aspect ratio */  
}
@media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 48em) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 48em) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 48em) and (min-resolution: 1.5dppx) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagemedium-1-w1920.jpg); } /* 1920 wide, 16:9; */ 
}

@media (min-width: 60em) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagewide-w1100.jpg); } /* 1100px wide image with a 16:9 aspect ratio */  
}
@media only screen and (min-width: 60em) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 60em) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 60em) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 60em) and (min-resolution: 1.5dppx) {
	.banner-hero { background-image: url(https://www.greenhilldigital.com/console/resources/werefhomepageheroimagewide-w2200.jpg); } /* 2200 wide, 16:9; */ 
}
</style>
<!-- end of stuff to go in the <head> -->

<article class="banner banner-hero">
	<a class="wrapping-anchor" href="/portfolio/case-studies/weref-app">
	<img srcset="https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w320.jpg 320w,
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w480.jpg 480w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w640.jpg 640w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w752.jpg 752w, 
	            https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow-w960.jpg 960w" sizes="100vw" src="https://www.greenhilldigital.com/console/resources/werefhomepageheroimagenarrow.jpg" alt="A player heading the ball in a football match">
    <div class="hero-detail">
    	<h3>Portfolio Feature</h3>
        <h2>we.ref</h2>
        <p>FIFA-approved game management technology for football referees, ushering in a new era for The Beautiful Game.</p>
        <span class="btn btn-more">Read story</span>
    </div>
	</a>
</article>
 
/* No context defined for this component. */

We haven’t used the <picture>–based approach here (which we use on banners) even though this meets “the art direction use case”. Instead, since not only the image but the banner text layout changes at wider screen resolutions, we’re using a hybrid approach employing i) a responsive <img> with browser–selected src; which switches at medium-wide resolutions to ii) a background image and element is hidden.