Hero Image - Component

Code

Source (Nunjucks)

<img class="hero-image" alt="A person looking into a scope, symbolizing monitoring and observation via the Reporting API."  decoding="auto" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format" srcset="https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=200 200w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=228 228w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=260 260w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=296 296w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=338 338w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=385 385w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=439 439w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=500 500w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=571 571w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=650 650w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=741 741w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=845 845w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=964 964w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1098 1098w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1252 1252w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1428 1428w,     https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1600 1600w" width="1600">

Output

<img
  class="hero-image"
  alt="A person looking into a scope, symbolizing monitoring and observation via the Reporting API."
  decoding="auto"
  height="480"
  sizes="100vw"
  src="https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format"
  srcset="
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=200   200w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=228   228w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=260   260w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=296   296w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=338   338w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=385   385w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=439   439w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=500   500w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=571   571w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=650   650w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=741   741w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=845   845w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=964   964w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1098 1098w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1252 1252w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1428 1428w,
    https://web-dev.imgix.net/image/O2RNUyVSLubjvENAT3e7JSdqSOx1/PEgnzZFQVPhP2PyOnMm8.jpg?auto=format&amp;w=1600 1600w
  "
  width="1600"
/>

Information

A handy class to apply to page-leading images that should fill the viewport, horizontally, up to a maximum width of approximately 1600px.

Key links

Sass File