Hero - Component
Code
Source (Nunjucks)
<header class="hero">
<div class="wrapper">
<div class="hero__columns switcher">
<div>
<span aria-hidden="true" class="hero__eyebrow">{{ data.eyebrow }}</span>
<div class="hero__content flow">
<img src="{{ data.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ data.imageWidth }}" height="{{ data.imageHeight }}" />
<h1 class="hero__title">{{ data.title }}</h1>
{{ data.summary | md | safe }}
<a class="button" data-type="primary" href="{{ data.buttonUrl }}">{{ data.buttonText }}</a>
</div>
</div>
<div class="flow">
{% for item in data.featureCards %}
<a class="feature-card" href="{{ item.url }}" data-theme="{{ item.theme }}">
<span class="feature-card__eyebrow">{{ item.eyebrow }}</span>
<h3 class="{{ 'visually-hidden' if item.hiddenTitle else 'feature-card__title' }}">{{ item.title }}</h3>
<img class="feature-card__background" alt="" aria-hidden="true" src="{{ item.background }}" />
</a>
{% endfor %}
</div>
</div>
</div>
</header>Output
<header class="hero">
<div class="wrapper">
<div class="hero__columns switcher">
<div>
<span aria-hidden="true" class="hero__eyebrow">About web.dev</span>
<div class="hero__content flow">
<img
src="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/B9KWrQo39fXbKSVYjz1e.svg"
alt=""
aria-hidden="true"
class="hero__decor"
width="330"
height="210"
/>
<h1 class="hero__title">Guides and tools for the modern web</h1>
<p>
Whether you already have a website or you're just getting started,
learn to build for the modern web at web.dev.
</p>
<a class="button" data-type="primary" href="/about/">Learn more</a>
</div>
</div>
<div class="flow">
<a class="feature-card" href="#" data-theme="dark">
<span class="feature-card__eyebrow">Web vitals</span>
<h3 class="feature-card__title">
Making their web app installable resulted in increased traffic
</h3>
<img
class="feature-card__background"
alt=""
aria-hidden="true"
src="/images/feature-cards/web-vitals-feature.png"
/>
</a>
<a class="feature-card" href="#" data-theme="light">
<span class="feature-card__eyebrow">Show</span>
<h3 class="feature-card__title">
Designing in the browser using Dev Tools for design
</h3>
<img
class="feature-card__background"
alt=""
aria-hidden="true"
src="/images/feature-cards/design-in-the-browser.jpg"
/>
</a>
</div>
</div>
</div>
</header>Information
Compositional blocks that allow you to lay out groups of promotional content.
Key links
Variants
Promo Panel
Code
Source (Nunjucks)
<section class="hero" data-type="promo">
<div class="wrapper">
<div class="hero__columns switcher">
<div>
<span aria-hidden="true" class="hero__eyebrow">{{ data.eyebrow }}</span>
<div class="hero__content flow">
<h1 class="hero__title">{{ data.title }}</h1>
{{ data.summary | md | safe }}
<div class="cluster gutter-base flow-space-size-2">
<a class="button" data-type="primary" href="{{ data.primaryButtonUrl }}">{{ data.primaryButtonText }}</a>
<a class="button" data-type="secondary" href="{{ data.secondaryButtonUrl }}">{{ data.secondaryButtonText }}</a>
</div>
</div>
</div>
<div>
<img src="{{ data.image }}" alt="" aria-hidden="true" class="hero__decor" width="{{ data.imageWidth }}" height="{{ data.imageHeight }}" />
</div>
</div>
</div>
</section>Output
<section class="hero" data-type="promo">
<div class="wrapper">
<div class="hero__columns switcher">
<div>
<span aria-hidden="true" class="hero__eyebrow">Event</span>
<div class="hero__content flow">
<h1 class="hero__title">Chrome Dev Summit 2021</h1>
<p>
Join the Chrome team for our two-day summit on the latest techniques
for building the modern Web.
</p>
<div class="cluster gutter-base flow-space-size-2">
<a class="button" data-type="primary" href="#">Request an invite</a>
<a class="button" data-type="secondary" href="#">Add to calendar</a>
</div>
</div>
</div>
<div>
<img
src="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/k25FHfpYLo9LQLvYT413.png"
alt=""
aria-hidden="true"
class="hero__decor"
width="800"
height="728"
/>
</div>
</div>
</div>
</section>