Features a full-width image (light or dark) with superimposed text (light or dark contrasting). See a demo page with a site header.
Usage Guidance
Do
Use on home pages and landing pages with multiple child pages.
When used on pages other than Home Pages or Section Landing Pages, the headline (H1) must be the page title.
Include a title/headline (required), a description (optional), and call-to-action link button(s) (optional).
Do Not
Use more than ONE Hero on a page.
Toggle Component Options
Theme Black to Gray-Darker Blue-Dark to Blue Blue to Teal-Darker Green-Dark to Green Blue-Dark to Green-Dark Green-Dark to Blue-Dark Gray-Light to white Gray-Light to Gray-Lighter Teal-Light to Teal-Lighter Image Business Solar Chef Family Landscape One Person Store Solar Solar Cell Two Person Store Content Content 1 Content 2 Content 3 Too Much Content Action No Actions Primary Action Primary and Secondary Action
Say Yes to Renewables
Striving for sustainability is just smart business
Accessibility
Labeling Expectations
Use a unique `id=""` on the title.
Use a unique `id=""` on the action link button(s).
Use `aria-labelledby=""` on the link buttons referencing the id of the link button(s) and the id of the title.
Keyboard Expectations
When you TAB into the `Hero` component, focus will go onto the link button(s).
Resources
Ensure that images clearly communicate the concept across all breakpoints and that critical information is not cropped out.
<!--
Hero Section wrapper
- Component below hero is required to use a white background color
-->
<section class="relative 2xl:px-24 2xl:pt-24">
<!--
Hero Container
-->
<div class="relative container-5xl flex flex-col justify-center aspect-16/12 sm:aspect-16/9 md:aspect-16/7 lg:aspect-16/6 xl:aspect-16/5 px-24 sm:px-32 md:px-48 py-64 md:py-48">
<!--
- Leave alt attribute empty
- Use 'srcset' and 'sizes' attributes to optimize the hero image
-->
<img
class="absolute top-0 left-0 object-cover object-right w-full h-full 2xl:rounded-lg bg-gray-light"
src="image.jpg?w=800&as=1&bc=ffffff"
srcset="image.jpg?w=800&as=1&bc=ffffff 800w,
image.jpg?w=1600&as=1&bc=ffffff 1600w"
sizes="(min-width: 768px) 1600px, 800px"
alt=""
width="1600"
height="500"
loading="lazy"
>
<!--
Overlay
- Change background gradient colors based on theme of hero
- Default - "from-blue-dark to-blue sm:via-blue"
-->
<div
class="absolute top-0 left-0 h-full w-full 2xl:rounded-l-lg md:w-3/4 bg-gradient-to-tr md:bg-gradient-to-r md:to-transparent opacity-80"
aria-hidden="true"
></div>
<!--
Content Container
-->
<div class="relative w-full container-xs md:container-4xl">
<!--
If dark theme/gradient, text is white
- Use "text-white"
If light theme/gradient, text can be gray or blue
- Use "text-gray-dark" -or- "text-blue"
Default
- "text-white"
-->
<div class="w-full md:w-1/2 text-center md:text-left">
<!-- Hero Title
- If this is the page title, you should use an <h1> element
- Use an <h2> element if you already have a page title on the page
-->
<h2
class="text-3xl md:text-2xl-fixed xl:text-3xl"
id="hero-title"
>
Hero Title
</h2>
<!-- Hero Short Description-->
<p class="text-lg xl:text-xl mt-12 lg:mt-16">
Description goes here.
</p>
<!-- Hero Actions -->
<div class="flex justify-center md:justify-start gap-16 lg:gap-24 mt-16 lg:mt-24">
<!--
If dark theme/gradient
- Use "btn-primary-reversed"
If light theme/gradient
- Use "btn-primary"
Default
- "btn-primary-reversed"
-->
<a
class="btn btn-primary-reversed btn-md"
href="#"
id="hero-primary-action"
aria-labelledby="hero-primary-action hero-title"
>
Primary Action
</a>
<!--
If dark theme/gradient
- Use "btn-secondary-reversed"
If light theme/gradient
- Use "btn-secondary"
Default
- "btn-secondary-reversed"
-->
<a
class="btn btn-secondary-reversed btn-sm lg:btn-md"
href="#"
id="hero-secondary-action"
aria-labelledby="hero-secondary-action hero-title"
>
Secondary Action
</a>
</div>
</div>
</div>
</div>
</section>
