<!-- Hero Section wrapper - Component below hero is required to use a white background color--><sectionclass="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 --> <imgclass="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 --> <divclass="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" --> <divclass="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 --> <h2class="text-3xl md:text-2xl-fixed xl:text-3xl"id="hero-title" > Hero Title </h2><!-- Hero Short Description--> <pclass="text-lg xl:text-xl mt-12 lg:mt-16"> Description goes here. </p><!-- Hero Actions --> <divclass="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" --> <aclass="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" --> <aclass="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>
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).
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