Usage
<header class="hero theme">
<img src="/images/hero/img.webp" alt="" />
<div class="hero-content">
<div class="l-center" style="--cr-max-width: var(--bp-40)">
<div class="u-gutter">
<div class="l-stack" style="color: var(--white); text-align: center; ">
<h1>Article Title</h1>
<p style="font-size: var(--s2); max-width: 55ch">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex est
sequi aperiam libero possimus dolorum, aliquid, iste eaque nisi hic
autem.
</p>
<a href="/" class="button theme" style="margin-inline: auto;"
>Learn More</a
>
</div>
</div>
</div>
</div>
</header>
.hero {
position: relative;
overflow: hidden;
max-height: 600px;
height: 100vh;
display: flex;
flex-direction: column;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: var(--black);
opacity: 0.3;
}
.hero > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero > *:not(img) {
position: relative;
z-index: 3;
}
.hero-content {
height: 100%;
min-height: var(--hero-min-height, 37.5rem);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--global-padding);
}
Content
The text content determines the height. The custom property --hero-min-height
allows for setting a minimum height on the content. This ensures the hero can expand as needed.
Image
This approach uses an <img>
tag set to object-fit: cover
so that it fills the available space. This allows us to take advantage of the responsive features available.
- The
srcset
andsizes
attributes provides the browser with information needed to choose the appropriate image image given the device and network speed. - The
fetchpriority='high'
attribute informs the browser that this image should be loaded as quickly as possible. - Note, leaving an empty alt tag indicates to browser/user that image is decorative, will not be announced via screenreader. It will be treated like an image.