Hero

Javascript required

The Hero block is a prominent section at the top of a web page, strategically positioned to deliver a captivating visual message above the fold.

It serves as the primary focal point, instantly capturing visitors' attention and conveying key information or brand identity. Typically, the hero block features eye-catching imagery, concise text, and compelling calls to action, making it an essential element for engaging users and driving their interaction with the website.

Refer to the Imagery guideline on how to use images for hero sections and how to place text on images. Focus on adding images with clear backgrounds and solid colours.

Key elements to note

The hero banner can be placed creatively on any page. It may not be the first element after the header on certain pages.
The hero banner slider cannot exceed 500px on the largest desktop size. It must resize appropriately on smaller screen sizes.
- You must use the ` <picture> ` HTML attribute and ` srcset ` to load different variations of the hero banner image on different devices.
- The banner must be in landscape mode on desktops - in other words, the width must be greater than the height.
- The banner must be in potrait mode on mobile devices smaller than 640px as their viewport - in other words, the height must be greater than the width.
You must not exceed over 4 slides in the hero element.
You must add lazy loading to your hero element.
You must not switch the slides quickly. Learn more about how adding a hero banner slider affects the First Contentful Paint attribute for search engine performance.
There are 2 types of slides:
- When you use a solid background and the creative element it on the right on desktops, use the slider where text and a call to action can be placed on the slide.
- When you need your banner to be creative and it contains text within the creative element itself, use the second option and make the entire slide clickable.

This block depends on Javascript to run as slider

To utilize this block, please ensure that you are using a Slider Animation Library. For the purpose of demo, this block uses the Slick Slider - a library bundled to be used along with jQuery.

You may use any other slider library - as long as you follow the rules on how to place elements within the hero object.

Ushering a new era of interaction

Explore in Virtual Reality

<div class="mb-10">
	<div class="relative">
		<div class="hero-slider [&_.slick-list]:rounded-xl [&_.slick-list]:overflow-hidden max-sm:[&_picture_img]:aspect-[4/4.88] sm:[&_picture_img]:aspect-[4/1.350] [&_picture_img]:object-cover [&_picture_img]:!w-full">
			<div>
				<a href="#" class="block">
					<picture>
						<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/tdra-banner-02.jpg">
						<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/tdra-banner-02.jpg">
						<img src="/img/block_assets/hero-slider/tdra-banner-02-mobile.jpg" alt="slider image" style="width:auto;">
					</picture>
				</a>
			</div>
			<div>
				<div class="relative h-full w-full"> 
					<picture>
						<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/tdra-banner-01.jpg">
						<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg">
						<img src="/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" alt="slider image" style="width:auto;">
					</picture>
					<div class="absolute rtl:[direction:ltr] top-6 md:top-2/4 md:-translate-y-2/4 left-6 lg:left-12 xl:left-[4.25rem] space-y-4 md:space-y-5 xl:space-y-10">
						<h2 class="text-h6 md:text-h4 lg:text-h2 xl:text-h1 font-light text-whitely-50 sm:w-7/12">Ushering a new era of interaction</h2>
						<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Explore in Virtual Reality</a>
					</div>
				</div>
			</div>
		</div>
		<div class="aegovs-slider-style xl:absolute xl:bottom-10 left-6 lg:left-12 xl:left-[4.25rem] flex items-center gap-5 lg:gap-6 xl:gap-8 max-xl:justify-center max-xl:mt-4  xl:[&_.slick-dots_button]:bg-aeblack-50/50  xl:[&_.slick-dots_.slick-active_button]:bg-aeblack-950 xl:[&_.slick-dots_.slick-active_button]:ring-aeblack-400/30 [&_.slick-dots]:mt-0 [&_.slick-dots_button]:w-2 [&_.slick-dots_button]:h-2 [&_.slick-dots_li]:flex">
			<div class="aegov-slider-prev opacity-60 cursor-pointer hover:opacity-100">
				<svg class="w-5 h-5 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="160 208 80 128 160 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
			</div>
			<div class="slick-slider-dots"></div>
			<div class="aegov-slider-next opacity-60 cursor-pointer hover:opacity-100">
				<svg class="w-5 h-5 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
			</div>
		</div>
	</div>
</div>

Header