<div class="js-component relative z-0 component-spacer-padding gradient-dark">
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
<div class="container relative z-20">
<div class="max-w-[950px] mx-auto bg-grey-100 px-13 py-6 lg:px-28 lg:py-13 rounded-3xl">
<h2 class="text-3xl lg:text-9xl font-font-medium text-bravo-900 text-center">Contact us</h2>
<div class="text-center mb-8 lg:mb-12 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 mx-auto max-w-lg ">
<p>Register your details and we'll keep in touch with our latest offers.</p>
</div>
<div class="mt-8">
<div class="flex flex-col gap-8">
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Full name</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block font-medium">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Email</span>
<input type="email" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" placeholder="john@hotmail.com">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">When is your event?</span>
<div class="relative">
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black">
<div class="absolute w-5 h-5 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
<svg class="fill-current w-full h-full text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</div>
</div>
</label>
<fieldset>
<legend class="text-bravo-900 mb-2 block font-bold text-lg">Do you agree?</legend>
<div class="flex gap-x-4">
<label class="inline-flex items-center">
<input type="radio" class=" text-bravo-900 default-focus focus-within:ring-black" name="Do you agree?" value="Yes">
<span class="ml-2 text-bravo-900">Yes</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class=" text-bravo-900 default-focus focus-within:ring-black" name="Do you agree?" value="No">
<span class="ml-2 text-bravo-900">No</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">What type of event is it?</span>
<select class="block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<fieldset>
<legend class="text-bravo-900 mb-2 block font-bold text-lg">Select multiple options</legend>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 1">
<span class="ml-2 text-bravo-900">Option 1</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 2">
<span class="ml-2 text-bravo-900">Option 2</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 3">
<span class="ml-2 text-bravo-900">Option 3</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Other">
<span class="ml-2 text-bravo-900">Other</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Additional details</span>
<textarea class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" rows="3"></textarea>
</label>
<div class="block">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha/50
shadow-sm
default-focus focus-within:ring-black" checked="">
<span class="ml-2 text-bravo-900">Sign up to our newsletter</span>
</label>
</div>
</div>
</div>
<div class="my-8 text-center">
<button class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Submit
</div>
<div class="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#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding gradient-dark" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}
<div class="js-component relative z-0 {{bgClass}}">
{% if bgContrast %}
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
{% endif %}
<div class="container relative z-20">
<div class="max-w-[950px] mx-auto bg-grey-100 px-13 py-6 lg:px-28 lg:py-13 rounded-3xl">
<h2 class="text-3xl lg:text-9xl font-font-medium text-bravo-900 text-center">Contact us</h2>
<div class="text-center mb-8 lg:mb-12 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 mx-auto max-w-lg {{richTextColourClass}} {{spacingClasses}}">
<p>Register your details and we'll keep in touch with our latest offers.</p>
</div>
<div class="mt-8">
<div class="flex flex-col gap-8">
{% render "@text-input", { label: "Full name" } %}
{% render "@email-input", { label: "Email", placeholder: "john@hotmail.com" } %}
{% render "@date-input", { label: "When is your event?" } %}
{% render "@radio-box-input", { label: "Do you agree?", options: ["Yes", "No"] } %}
{% render "@select-input", { label: "What type of event is it?", options: ["Corporate event", "Wedding", "Birthday", "Other"] } %}
{% render "@check-box-list-input", { label: "Select multiple options", options: ["Option 1", "Option 2", "Option 3", "Other"] } %}
{% render "@text-area-input", { label: "Additional details" } %}
{% render "@check-box-input", { label: "Sign up to our newsletter" } %}
</div>
<div class="my-8 text-center">
{% render "@button--bravo", { renderAsButton: true, text: 'Submit' }, true %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"link": {
"text": "Submit",
"url": "./index"
},
"bgContrast": true
}
No notes defined.