<div class="js-component relative z-0 component-spacer-padding bg-grey-50">
<div class="container">
<div class="max-w-screen-md mx-auto">
<h2 class="text-3xl font-font-semibold text-bravo">Contact us</h2>
<div class="mt-8">
<div class="flex flex-col gap-8">
<label class="block">
<span class="text-grey-800 mb-2 block font-semibold">Full name</span>
<input type="text" class="
block
w-full
rounded-md
border-grey-400
shadow-sm
focus:border-alpha focus:ring-3 focus:ring-alpha/20" placeholder="">
</label>
<label class="block font-semibold">
<span class="text-grey-800 mb-2 block">Email</span>
<input type="email" class="
block
w-full
rounded-md
border-grey-400
shadow-sm
focus:border-alpha focus:ring-3 focus:ring-alpha/20" placeholder="john@hotmail.com">
</label>
<label class="block">
<span class="text-grey-800 mb-2 block font-semibold">When is your event?</span>
<div class="relative">
<input type="text" class="
block
w-full
rounded-md
border-grey-400
shadow-sm
focus:border-alpha focus:ring-3 focus:ring-alpha/20">
<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-grey" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</div>
</div>
</label>
<fieldset>
<legend class="text-grey-800 mb-2 block font-semibold">Do you agree?</legend>
<div class="flex gap-x-4">
<label class="inline-flex items-center">
<input type="radio" class=" text-alpha focus:border-alpha focus:ring-3 focus:ring-alpha/20" name="Do you agree?" value="Yes">
<span class="ml-2">Yes</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class=" text-alpha focus:border-alpha focus:ring-3 focus:ring-alpha/20" name="Do you agree?" value="No">
<span class="ml-2">No</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-grey-800 mb-2 block font-semibold">What type of event is it?</span>
<select class="block
w-full
rounded-md
border-grey-400
shadow-sm
focus:border-alpha focus:ring-3 focus:ring-alpha/20">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<fieldset>
<legend class="text-grey-800 mb-2 block font-semibold">Select multiple options</legend>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
focus:border-alpha
focus:ring-alpha
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-alpha focus:ring-3 focus:ring-alpha/20" value="Option 1">
<span class="ml-2">Option 1</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
focus:border-alpha
focus:ring-alpha
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-alpha focus:ring-3 focus:ring-alpha/20" value="Option 2">
<span class="ml-2">Option 2</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
focus:border-alpha
focus:ring-alpha
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-alpha focus:ring-3 focus:ring-alpha/20" value="Option 3">
<span class="ml-2">Option 3</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
focus:border-alpha
focus:ring-alpha
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-alpha focus:ring-3 focus:ring-alpha/20" value="Other">
<span class="ml-2">Other</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-grey-800 mb-2 block font-semibold">Additional details</span>
<textarea class="
block
w-full
rounded-md
border-grey-400
shadow-sm
focus:border-alpha focus:ring-3 focus:ring-alpha/20" rows="3"></textarea>
</label>
<div class="block">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
focus:border-alpha
focus:ring-alpha/50
shadow-sm
focus:ring
focus:ring-offset-0" checked="">
<span class="ml-2">Sign up to our newsletter</span>
</label>
</div>
</div>
</div>
<div class="my-8">
<button class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Button Example
</button>
</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">
<div class="max-w-screen-md mx-auto">
<h2 class="text-3xl font-font-semibold text-bravo">Contact us</h2>
<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">
{% render "@button", { renderAsButton: true, name: 'Submit' }, true %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"bgContrast": true
}
No notes defined.