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>

Variations

Variations are different versions of this block that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Hero Full Width - Slick JS

Ushering a new era of interaction

Learn more

<div class="aegov-hero hero-slick hero-slick-full-width relative">
	<div class="hero-full-width">
		<div>
			<div class="relative w-full">
				<picture>
					<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01.jpg" />
					<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" />
					<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" alt="slider image" />
				</picture>
				<div class="hero-hero-title-wrap">
					<div class="hero-hero-title">
						Ushering a new era of interaction
					</div>
					<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
				</div>
			</div>
		</div>
		<div>
			<a onclick="return false;" href="#" class="block" tabindex="0">
				<picture>
					<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
					<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
					<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02-mobile.jpg" alt="slider image" />
				</picture>
			</a>
		</div>
	</div>
	<div class="hero-controls">
		<div class="hero-buttons">
			<button class="hero-button hero-prev-full-width" type="button">
				<svg class="rtl:-scale-x-100 text-aeblack-800 w-full h-full" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
				</svg>
			</button>
			<button class="hero-play-full-width [&.start-sliding_.play-icon]:block [&.start-sliding_.pause-icon]:hidden * [&.stop-sliding_.pause-icon]:block [&.stop-sliding_.play-icon]:hidden" type="button">
				<!-- play icon -->
				<svg class="play-icon text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path
						d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"
					></path>
				</svg>
				<!-- pause icon -->
				<svg class="pause-icon text-aeblack-800 hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM112,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Z"></path>
				</svg>
			</button>
			<button class="hero-button hero-next-full-width" type="button">
				<svg class="rtl:-scale-x-100 text-aeblack-800 w-full h-full" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
				</svg>
			</button>
		</div>
		<div class="hero-dots hero-dots-full-width"></div>
	</div>
</div>

$('.hero-slick-full-width .hero-full-width').slick({
	pauseOnHover: false,
	arrows: true,
	infinite: true,
	autoplay: true,
	autoplaySpeed: 3000,
	prevArrow: $('.hero-prev-full-width'),
	nextArrow: $('.hero-next-full-width'),
	dots: true,
	appendDots: $('.hero-slick-full-width .hero-dots-full-width'),
});

function setInitialButtonState(heroClass, playButtonClass) {
	var slick = $(heroClass).slick('getSlick');
	if (slick.options.autoplay) {
	  $(playButtonClass).removeClass('start-sliding').addClass('stop-sliding');
	} else {
	  $(playButtonClass).removeClass('stop-sliding').addClass('start-sliding');
	}
  }

  function addPlayPauseListener(heroClass, playButtonClass) {
	$(playButtonClass).click(function () {
	  var slick = $(heroClass).slick('getSlick');
	  if (slick.paused) {
		slick.slickPlay();
		$(this).removeClass('start-sliding').addClass('stop-sliding');
	  } else {
		slick.slickPause();
		$(this).removeClass('stop-sliding').addClass('start-sliding');
	  }
	});
  }

  // Set initial button state and add play/pause listener for the full-width hero
  setInitialButtonState('.hero-full-width', '.hero-play-full-width');
  addPlayPauseListener('.hero-full-width', '.hero-play-full-width');

Hero Split - Slick JS

Seniors retirement pension in United Arab Emirates

Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained

Learn more

Seniors retirement pension in United Arab Emirates

Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained

Learn more

<div class="aegov-hero hero-slick hero-slick-split relative">
	<div class="hero-split">
		<div>
			<div class="hero-row">
				<div class="hero-col-left">
					<div class="hero-col-content">
						<div class="hero-title">Seniors retirement pension in United Arab Emirates</div>
						<p class="hero-description">Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained</p>
						<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
					</div>
				</div>
				<div class="hero-col-right">
					<picture>
						<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
						<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
						<img src="/img/block_assets/hero-slider/split-slider-image.jpg" alt="slider image" />
					</picture>
				</div>
			</div>
		</div>
		<div>
			<div class="hero-row">
				<div class="hero-col-left">
					<div class="hero-col-content">
						<div class="hero-title">Seniors retirement pension in United Arab Emirates</div>
						<p class="hero-description">Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained</p>
						<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
					</div>
				</div>
				<div class="hero-col-right">
					<picture>
						<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
						<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
						<img src="/img/block_assets/hero-slider/split-slider-image.jpg" alt="slider image" />
					</picture>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-controls">
		<div class="hero-buttons">
			<button class="hero-button hero-prev-split" type="button">
				<svg class="rtl:-scale-x-100 text-aeblack-800 w-full h-full" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
				</svg>
			</button>
			<button class="hero-play-split [&.start-sliding_.play-icon]:block [&.start-sliding_.pause-icon]:hidden * [&.stop-sliding_.pause-icon]:block [&.stop-sliding_.play-icon]:hidden" type="button">
				<!-- play icon -->
				<svg class="play-icon text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path
						d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"
					></path>
				</svg>
				<!-- pause icon -->
				<svg class="pause-icon text-aeblack-800 hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM112,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Z"></path>
				</svg>
			</button>
			<button class="hero-button hero-next-split" type="button">
				<svg class="rtl:-scale-x-100 text-aeblack-800 w-full h-full" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
					<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
				</svg>
			</button>
		</div>
		<div class="hero-dots hero-dots-split"></div>
	</div>
</div>

$('.hero-slick-split .hero-split').slick({
	pauseOnHover: false,
	arrows: true,
	infinite: true,
	autoplay: false,
	autoplaySpeed: 3000,
	prevArrow: $('.hero-prev-split'),
	nextArrow: $('.hero-next-split'),
	dots: true,
	appendDots: $('.hero-slick-split .hero-dots-split'),
});
function setInitialButtonState(heroClass, playButtonClass) {
	var slick = $(heroClass).slick('getSlick');
	if (slick.options.autoplay) {
	  $(playButtonClass).removeClass('start-sliding').addClass('stop-sliding');
	} else {
	  $(playButtonClass).removeClass('stop-sliding').addClass('start-sliding');
	}
  }

  function addPlayPauseListener(heroClass, playButtonClass) {
	$(playButtonClass).click(function () {
	  var slick = $(heroClass).slick('getSlick');
	  if (slick.paused) {
		slick.slickPlay();
		$(this).removeClass('start-sliding').addClass('stop-sliding');
	  } else {
		slick.slickPause();
		$(this).removeClass('stop-sliding').addClass('start-sliding');
	  }
	});
  }

  // Set initial button state and add play/pause listener for the split hero
  setInitialButtonState('.hero-split', '.hero-play-split');
  addPlayPauseListener('.hero-split', '.hero-play-split');

Hero Full Width - Embla js

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 Embla Carousel - Embla Carousel is a library agnostic, dependency free and lightweight carousel library.

Embla carousel CDN :

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

Embla carousel CDN:

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>

Ushering a new era of interaction

Learn more

Ushering a new era of interaction

Learn more

<div class="aegov-hero hero-embla hero-embla-full-width relative">
	<div class="hero-full-width">
		<div class="hero-viewport">
			<div class="hero-container">
				<div class="hero-slide">
					<div class="relative w-full">
						<picture>
							<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01.jpg" />
							<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" />
							<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" alt="slider image" />
						</picture>
						<div class="hero-hero-title-wrap">
							<div class="hero-hero-title">
								Ushering a new era of interaction
							</div>
							<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
						</div>
					</div>
				</div>
				<div class="hero-slide">
					<a onclick="return false;" href="#" class="block" tabindex="0">
						<picture>
							<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
							<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
							<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02-mobile.jpg" alt="slider image" />
						</picture>
					</a>
				</div>
				<div class="hero-slide">
					<div class="relative w-full">
						<picture>
							<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01.jpg" />
							<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" />
							<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-01-mobile.jpg" alt="slider image" />
						</picture>
						<div class="hero-hero-title-wrap">
							<div class="hero-hero-title">
								Ushering a new era of interaction
							</div>
							<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
						</div>
					</div>
				</div>
				<div class="hero-slide">
					<a onclick="return false;" href="#" class="block" tabindex="0">
						<picture>
							<source media="(min-width:650px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
							<source media="(min-width:465px)" srcset="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02.jpg" />
							<img src="https://designsystem.gov.ae/img/block_assets/hero-slider/tdra-banner-02-mobile.jpg" alt="slider image" />
						</picture>
					</a>
				</div>
			</div>
		</div>
		<div class="hero-controls">
			<div class="hero-buttons">
				<button class="hero-button hero-prev" type="button" disabled="">
					<svg class="rtl:-scale-x-100 text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
					</svg>
				</button>
				<button class="hero-embla-play-full-width [&.start-sliding_.play-icon]:block [&.start-sliding_.pause-icon]:hidden * [&.stop-sliding_.pause-icon]:block [&.stop-sliding_.play-icon]:hidden" type="button">
					<!-- play icon -->
					<svg class="play-icon text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path
							d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"
						></path>
					</svg>
					<!-- pause icon -->
					<svg class="pause-icon text-aeblack-800 hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM112,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Z"></path>
					</svg>
				</button>
				<button class="hero-button hero-next" type="button" disabled="">
					<svg class="rtl:-scale-x-100 text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
					</svg>
				</button>
			</div>
			<div class="hero-dots"></div>
		</div>
	</div>
</div>

document.addEventListener("DOMContentLoaded", () => {
	// Embla custom js
	const initializeEmblahero = (emblaNode, options, autoplayOptions, playBtnClass) => {
		const viewportNode = emblaNode.querySelector(".hero-viewport");
		const prevBtn = emblaNode.querySelector(".hero-prev");
		const nextBtn = emblaNode.querySelector(".hero-next");
		const playBtn = emblaNode.querySelector(playBtnClass);
		const dotsNode = emblaNode.querySelector(".hero-embla .hero-dots");

		const emblaApi = EmblaCarousel(viewportNode, options, [EmblaCarouselAutoplay(autoplayOptions)]);

		const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(emblaApi, prevBtn, nextBtn);

		const removePlayBtnListeners = playBtn ? addPlayBtnListeners(emblaApi, playBtn) : null;
		const removeNavBtnListeners = addNavBtnListeners(emblaApi, prevBtn, nextBtn);
		const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(emblaApi, dotsNode);

		emblaApi.on("destroy", removePrevNextBtnsClickHandlers).on("destroy", removePlayBtnListeners).on("destroy", removeNavBtnListeners).on("destroy", removeDotBtnsAndClickHandlers);
	};

	const addTogglePrevNextBtnsActive = (emblaApi, prevBtn, nextBtn) => {
		const togglePrevNextBtnsState = () => {
			if (emblaApi.canScrollPrev()) prevBtn.removeAttribute("disabled");
			else prevBtn.setAttribute("disabled", "disabled");

			if (emblaApi.canScrollNext()) nextBtn.removeAttribute("disabled");
			else nextBtn.setAttribute("disabled", "disabled");
		};

		emblaApi.on("select", togglePrevNextBtnsState).on("init", togglePrevNextBtnsState).on("reInit", togglePrevNextBtnsState);

		return () => {
			prevBtn.removeAttribute("disabled");
			nextBtn.removeAttribute("disabled");
		};
	};

	const addPrevNextBtnsClickHandlers = (emblaApi, prevBtn, nextBtn) => {
		const scrollPrev = () => {
			emblaApi.scrollPrev();
		};
		const scrollNext = () => {
			emblaApi.scrollNext();
		};
		prevBtn.addEventListener("click", scrollPrev, false);
		nextBtn.addEventListener("click", scrollNext, false);

		const removeTogglePrevNextBtnsActive = addTogglePrevNextBtnsActive(emblaApi, prevBtn, nextBtn);

		return () => {
			removeTogglePrevNextBtnsActive();
			prevBtn.removeEventListener("click", scrollPrev, false);
			nextBtn.removeEventListener("click", scrollNext, false);
		};
	};

	const addPlayBtnListeners = (emblaApi, playBtn) => {
		const togglePlayBtnState = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			if (autoplay.isPlaying()) {
				playBtn.classList.remove("stop-sliding");
				playBtn.classList.add("start-sliding");
			} else {
				playBtn.classList.remove("start-sliding");
				playBtn.classList.add("stop-sliding");
			}
		};

		const onPlayBtnClick = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
			playOrStop();
		};

		playBtn.addEventListener("click", onPlayBtnClick);
		emblaApi
			.on("autoplay:play", togglePlayBtnState)
			.on("autoplay:stop", togglePlayBtnState)
			.on("reInit", () => {
				togglePlayBtnState(); // Ensure initial state is set on reInit
			});

		// Set initial state based on playOnInit setting
		if (emblaApi?.plugins()?.autoplay?.options.playOnInit) {
			playBtn.classList.remove("start-sliding");
			playBtn.classList.add("stop-sliding");
		} else {
			playBtn.classList.remove("stop-sliding");
			playBtn.classList.add("start-sliding");
		}

		return () => {
			playBtn.removeEventListener("click", onPlayBtnClick);
			emblaApi.off("autoplay:play", togglePlayBtnState).off("autoplay:stop", togglePlayBtnState).off("reInit", togglePlayBtnState);
		};
	};

	const addNavBtnListeners = (emblaApi, ...navButtons) => {
		const onNavClick = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			const resetOrStop = autoplay.options.stopOnInteraction === false ? autoplay.reset : autoplay.stop;

			resetOrStop();
		};

		navButtons.forEach((navButton) => navButton.addEventListener("click", onNavClick, true));

		return () => {
			navButtons.forEach((navButton) => navButton.removeEventListener("click", onNavClick, true));
		};
	};

	const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
		let dotNodes = [];

		const addDotBtnsWithClickHandlers = () => {
			dotsNode.innerHTML = emblaApi
				.scrollSnapList()
				.map(() => '<button class="hero-dot" type="button"></button>')
				.join("");

			const scrollTo = (index) => {
				emblaApi.scrollTo(index);
			};

			dotNodes = Array.from(dotsNode.querySelectorAll(".hero-dot"));
			dotNodes.forEach((dotNode, index) => {
				dotNode.addEventListener("click", () => scrollTo(index), false);
			});
		};

		const toggleDotBtnsActive = () => {
			const previous = emblaApi.previousScrollSnap();
			const selected = emblaApi.selectedScrollSnap();
			dotNodes[previous].classList.remove("hero-dot-selected");
			dotNodes[selected].classList.add("hero-dot-selected");
		};

		emblaApi.on("init", addDotBtnsWithClickHandlers).on("reInit", addDotBtnsWithClickHandlers).on("init", toggleDotBtnsActive).on("reInit", toggleDotBtnsActive).on("select", toggleDotBtnsActive);

		return () => {
			dotsNode.innerHTML = "";
		};
	};

	// Initialize full width slider
	const fullWidthNode = document.querySelector(".hero-embla-full-width .hero-full-width");
	if (fullWidthNode) {
		initializeEmblahero(fullWidthNode, { loop: true }, { playOnInit: false, delay: 3000 }, ".hero-embla-play-full-width");
	}
});

Hero Split - Embla js

This block depends on Javascript to run as slider

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

Seniors retirement pension in United Arab Emirates

Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained

Learn more

Seniors retirement pension in United Arab Emirates

Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained

Learn more

<div class="aegov-hero hero-embla hero-embla-split relative">
	<div class="hero-split">
		<div class="hero-viewport">
			<div class="hero-container">
				<div class="hero-slide">
					<div class="hero-row">
						<div class="hero-col-left">
							<div class="hero-col-content">
								<div class="hero-title">Seniors retirement pension in United Arab Emirates</div>
								<p class="hero-description">Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained</p>
								<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
							</div>
						</div>
						<div class="hero-col-right has-ratio-image">
							<picture>
								<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
								<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
								<img src="/img/block_assets/hero-slider/split-slider-image.jpg" alt="slider image" />
							</picture>
						</div>
					</div>
				</div>
				<div class="hero-slide">
					<div class="hero-row">
						<div class="hero-col-left">
							<div class="hero-col-content">
								<div class="hero-title">Seniors retirement pension in United Arab Emirates</div>
								<p class="hero-description">Calculating retirement pension in accordance with Federal law No. (57) of 2023 explained</p>
								<a href="" class="max-lg:btn-sm aegov-btn btn-secondary">Learn more</a>
							</div>
						</div>
						<div class="hero-col-right has-ratio-image">
							<picture>
								<source media="(min-width:650px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
								<source media="(min-width:465px)" srcset="/img/block_assets/hero-slider/split-slider-image.jpg" />
								<img src="/img/block_assets/hero-slider/split-slider-image.jpg" alt="slider image" />
							</picture>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="hero-controls">
			<div class="hero-buttons">
				<button class="hero-button hero-prev" type="button" disabled="">
					<svg class="rtl:-scale-x-100 text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
					</svg>
				</button>
				<button class="hero-embla-play-split [&.start-sliding_.play-icon]:block [&.start-sliding_.pause-icon]:hidden * [&.stop-sliding_.pause-icon]:block [&.stop-sliding_.play-icon]:hidden" type="button">
					<!-- play icon -->
					<svg class="play-icon text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path
							d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"
						></path>
					</svg>
					<!-- pause icon -->
					<svg class="pause-icon text-aeblack-800 hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM112,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Z"></path>
					</svg>
				</button>
				<button class="hero-button hero-next" type="button" disabled="">
					<svg class="rtl:-scale-x-100 text-aeblack-800" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
						<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
					</svg>
				</button>
			</div>
			<div class="hero-dots"></div>
		</div>
	</div>
</div>

document.addEventListener('DOMContentLoaded', () => {
	// Embla custom js 
	const initializeEmblahero = (emblaNode, options, autoplayOptions, playBtnClass) => {
		const viewportNode = emblaNode.querySelector(".hero-viewport");
		const prevBtn = emblaNode.querySelector(".hero-prev");
		const nextBtn = emblaNode.querySelector(".hero-next");
		const playBtn = emblaNode.querySelector(playBtnClass);
		const dotsNode = emblaNode.querySelector('.hero-embla .hero-dots');

		const emblaApi = EmblaCarousel(viewportNode, options, [
			EmblaCarouselAutoplay(autoplayOptions),
		]);

		const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
			emblaApi,
			prevBtn,
			nextBtn
		);

		const removePlayBtnListeners = playBtn ? addPlayBtnListeners(emblaApi, playBtn) : null;
		const removeNavBtnListeners = addNavBtnListeners(
			emblaApi,
			prevBtn,
			nextBtn
		);
		const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
			emblaApi,
			dotsNode
		);

		emblaApi
			.on("destroy", removePrevNextBtnsClickHandlers)
			.on("destroy", removePlayBtnListeners)
			.on("destroy", removeNavBtnListeners)
			.on("destroy", removeDotBtnsAndClickHandlers);
	};

	const addTogglePrevNextBtnsActive = (emblaApi, prevBtn, nextBtn) => {
		const togglePrevNextBtnsState = () => {
			if (emblaApi.canScrollPrev()) prevBtn.removeAttribute("disabled");
			else prevBtn.setAttribute("disabled", "disabled");

			if (emblaApi.canScrollNext()) nextBtn.removeAttribute("disabled");
			else nextBtn.setAttribute("disabled", "disabled");
		};

		emblaApi
			.on("select", togglePrevNextBtnsState)
			.on("init", togglePrevNextBtnsState)
			.on("reInit", togglePrevNextBtnsState);

		return () => {
			prevBtn.removeAttribute("disabled");
			nextBtn.removeAttribute("disabled");
		};
	};

	const addPrevNextBtnsClickHandlers = (emblaApi, prevBtn, nextBtn) => {
		const scrollPrev = () => {
			emblaApi.scrollPrev();
		};
		const scrollNext = () => {
			emblaApi.scrollNext();
		};
		prevBtn.addEventListener("click", scrollPrev, false);
		nextBtn.addEventListener("click", scrollNext, false);

		const removeTogglePrevNextBtnsActive = addTogglePrevNextBtnsActive(
			emblaApi,
			prevBtn,
			nextBtn
		);

		return () => {
			removeTogglePrevNextBtnsActive();
			prevBtn.removeEventListener("click", scrollPrev, false);
			nextBtn.removeEventListener("click", scrollNext, false);
		};
	};

	const addPlayBtnListeners = (emblaApi, playBtn) => {
		const togglePlayBtnState = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			if (autoplay.isPlaying()) {
				playBtn.classList.remove('stop-sliding');
				playBtn.classList.add('start-sliding');
			} else {
				playBtn.classList.remove('start-sliding');
				playBtn.classList.add('stop-sliding');
			}
		};

		const onPlayBtnClick = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			const playOrStop = autoplay.isPlaying()
				? autoplay.stop
				: autoplay.play;
			playOrStop();
		};

		playBtn.addEventListener("click", onPlayBtnClick);
		emblaApi
			.on("autoplay:play", togglePlayBtnState)
			.on("autoplay:stop", togglePlayBtnState)
			.on("reInit", () => {
				togglePlayBtnState(); // Ensure initial state is set on reInit
			});

		// Set initial state based on playOnInit setting
		if (emblaApi?.plugins()?.autoplay?.options.playOnInit) {
			playBtn.classList.remove('start-sliding');
			playBtn.classList.add('stop-sliding');
		} else {
			playBtn.classList.remove('stop-sliding');
			playBtn.classList.add('start-sliding');
		}

		return () => {
			playBtn.removeEventListener("click", onPlayBtnClick);
			emblaApi
				.off("autoplay:play", togglePlayBtnState)
				.off("autoplay:stop", togglePlayBtnState)
				.off("reInit", togglePlayBtnState);
		};
	};


	const addNavBtnListeners = (emblaApi, ...navButtons) => {
		const onNavClick = () => {
			const autoplay = emblaApi?.plugins()?.autoplay;
			if (!autoplay) return;

			const resetOrStop =
				autoplay.options.stopOnInteraction === false
					? autoplay.reset
					: autoplay.stop;

			resetOrStop();
		};

		navButtons.forEach((navButton) =>
			navButton.addEventListener("click", onNavClick, true)
		);

		return () => {
			navButtons.forEach((navButton) =>
				navButton.removeEventListener("click", onNavClick, true)
			);
		};
	};

	const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
		let dotNodes = [];

		const addDotBtnsWithClickHandlers = () => {
			dotsNode.innerHTML = emblaApi
				.scrollSnapList()
				.map(() => '<button class="hero-dot" type="button"></button>')
				.join("");

			const scrollTo = (index) => {
				emblaApi.scrollTo(index);
			};

			dotNodes = Array.from(dotsNode.querySelectorAll(".hero-dot"));
			dotNodes.forEach((dotNode, index) => {
				dotNode.addEventListener("click", () => scrollTo(index), false);
			});
		};

		const toggleDotBtnsActive = () => {
			const previous = emblaApi.previousScrollSnap();
			const selected = emblaApi.selectedScrollSnap();
			dotNodes[previous].classList.remove("hero-dot-selected");
			dotNodes[selected].classList.add("hero-dot-selected");
		};

		emblaApi
			.on("init", addDotBtnsWithClickHandlers)
			.on("reInit", addDotBtnsWithClickHandlers)
			.on("init", toggleDotBtnsActive)
			.on("reInit", toggleDotBtnsActive)
			.on("select", toggleDotBtnsActive);

		return () => {
			dotsNode.innerHTML = "";
		};
	};

	// Initialize split slider with different settings
	const splitNode = document.querySelector(".hero-embla-split .hero-split");
	if (splitNode) {
		initializeEmblahero(splitNode, { loop: true, speed: 10 }, { playOnInit: true, delay: 5000 }, '.hero-embla-play-split');
	}
});

Hero static

THE UNITED ARAB EMIRATES AUTHORITY ON

Fostering transparency & investor confidence

The title of the card

The description of a card, and this may be variable based on the device or width of the viewport.

The title of the card

The description of a card, and this may be variable based on the device or width of the viewport.

The title of the card

The description of a card, and this may be variable based on the device or width of the viewport.

<div class="aegov-hero-static">
	<div class="container">
		<div class="hero-static-header">
			<div class="hero-static-title-sm">THE UNITED ARAB EMIRATES AUTHORITY ON</div>
			<h1 class="hero-static-title">Fostering transparency & investor confidence</h1>
		</div>
		<div class="grid sm:grid-cols-3 gap-6">
			<div class="aegov-card card-bordered bg-whitely-50">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-8 h-8" aria-hidden="true">
					<rect width="256" height="256" fill="none" />
					<line x1="96" y1="96" x2="160" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="128" x2="160" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="160" x2="128" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<path
						d="M156.69,216H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8V156.69a8,8,0,0,1-2.34,5.65l-51.32,51.32A8,8,0,0,1,156.69,216Z"
						fill="none"
						stroke="currentColor"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="16"
					/>
					<polyline points="215.28 159.99 160 159.99 160 215.27" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
				</svg>
				<h5>The title of the card</h5>
				<p>The description of a card, and this may be variable based on the device or width of the viewport.</p>
			</div>
			<div class="aegov-card card-bordered bg-whitely-50">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-8 h-8" aria-hidden="true">
					<rect width="256" height="256" fill="none" />
					<line x1="96" y1="96" x2="160" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="128" x2="160" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="160" x2="128" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<path
						d="M156.69,216H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8V156.69a8,8,0,0,1-2.34,5.65l-51.32,51.32A8,8,0,0,1,156.69,216Z"
						fill="none"
						stroke="currentColor"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="16"
					/>
					<polyline points="215.28 159.99 160 159.99 160 215.27" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
				</svg>
				<h5>The title of the card</h5>
				<p>The description of a card, and this may be variable based on the device or width of the viewport.</p>
			</div>
			<div class="aegov-card card-bordered bg-whitely-50">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-8 h-8" aria-hidden="true">
					<rect width="256" height="256" fill="none" />
					<line x1="96" y1="96" x2="160" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="128" x2="160" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<line x1="96" y1="160" x2="128" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
					<path
						d="M156.69,216H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8V156.69a8,8,0,0,1-2.34,5.65l-51.32,51.32A8,8,0,0,1,156.69,216Z"
						fill="none"
						stroke="currentColor"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="16"
					/>
					<polyline points="215.28 159.99 160 159.99 160 215.27" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
				</svg>
				<h5>The title of the card</h5>
				<p>The description of a card, and this may be variable based on the device or width of the viewport.</p>
			</div>
		</div>
	</div>
</div>

Header

Hero

Key elements to note

Ushering a new era of interaction

Variations

Hero Full Width - Slick JS

Hero Split - Slick JS

Hero Full Width - Embla js

Hero Split - Embla js

Hero static

Fostering transparency & investor confidence

The title of the card

The title of the card

The title of the card

Sustainable by design