<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Check availability</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="flex justify-center">
<div data-vanilla-module="PostcodeLookupControl" class="opacity-0 transition ease-in-out duration-300 w-full max-w-[540px]">
<div data-initial-step="Search" class="block w-full">
<form class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1">
<input autocomplete="off" required class="js-postcode-input w-full disabled:opacity-50 border-0 leading-none lg:text-lg text-bravo font-bold placeholder:text-bravo placeholder:font-bold focus:outline-none focus:ring-0 focus:border-0" placeholder="Enter your postcode">
</div>
<div class="flex-shrink-0">
<button class="flex max-md:justify-center disabled:opacity-50 disabled:pointer-events-none items-center relative z-0 font-body font-bold lg:text-[19px] align-middle md:leading-none md:py-3.5 leading-normal md:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-md:text-base text-grey-800 bg-brand-gradient-4 w-11 h-11 md:w-auto md:h-auto">
<div class="js-btn-search-icon-mob block w-4 h-4 md:hidden">
<svg class="fill-current w-full h-full text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-search"></use>
</svg>
</div>
<div class="js-btn-loading-spinner md:mr-4.5 hidden">
<svg aria-hidden="true" class="w-4 h-4 text-white animate-spin dark:text-gray-600 fill-alpha" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
</svg>
</div>
<div class="js-submit-label hidden md:block relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</div>
<div class="max-md:hidden w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</form>
</div>
<div data-initial-step="Continue" data-type="" class="hidden w-full">
<div class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1 w-full border-0 leading-none lg:text-lg">
<div class="flex gap-6 items-center">
<div class="w-4 flex-shrink-0 hidden [[data-type='HasService']_&]:block">
<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.23936 8.7415C3.24438 7.81087 1.669 7.81087 0.674022 8.8261C-0.238042 9.84133 -0.238042 11.4488 0.756936 12.3794L8.21928 19.5706C9.29717 20.5858 10.9555 20.5012 11.8675 19.3168L23.4756 4.08836C24.3048 2.98852 24.1389 1.38108 23.061 0.535051C21.9832 -0.310974 20.4078 -0.141769 19.5786 0.958064L9.62883 13.9869L4.23936 8.7415Z" fill="#078937" />
</svg>
</div>
<div class="flex-1 [[data-type='NoService']_&]:pl-2 [[data-type='Business']_&]:pl-2">
<div class="text-s-green-800 lg:text-lg font-bold leading-tight hidden [[data-type='HasService']_&]:block">
Available<span class="hidden sm:inline"> at your address</span>
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='NoService']_&]:block">
Not available yet
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='Business']_&]:block">
Get a business quote
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='HasOpenOrder']_&]:block">
Call us
</div>
<button class="js-reset text-bravo-700 text-sm hover:underline">Search again</button>
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="js-continue-link inline-flex items-center relative z-0 font-body font-bold lg:text-[19px] align-middle leading-none py-3.5 px-4 lg:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-lg:text-base text-grey-800 bg-brand-gradient-4 disabled:opacity-50 disabled:pointer-events-none">
<div class="relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-continue-label">
<span class="hidden [[data-type='HasService']_&]:block">View packages</span>
<span class="hidden [[data-type='NoService']_&]:block">Register interest</span>
<span class="hidden [[data-type='Business']_&]:block">Contact us</span>
<span class="hidden [[data-type='HasOpenOrder']_&]:block">Request callback</span>
</span>
<span class="js-continue-loading hidden">Please wait...</span>
</div>
<div class="max-lg:hidden w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}
<div class="js-component relative z-0 {{bgClass}}">
<div class="container ">
{% if headline %}
{% render "@headline", headline %}
{% endif %}
<div class="flex justify-center">
{% render "@postcode-lookup" %}
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"headline": {
"heading": "Check availability",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
}
}
No notes defined.