Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Hero Image - Component

View full screen
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

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.