MentorKit Pattern Library

Contact Us 

<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-bravo">
    <div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">

        <picture class="block overflow-hidden h-full w-full">

            <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w">

            <img class="lazyload h-full object-cover w-full" alt="" width="1920" height="720" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example5@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-6@2000w.jpg">

        </picture>

    </div>
    <div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
        <div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
            <div class="px-4 md:px-20 md:w-8/12 lg:w-6/12 xl:w-5/12 pt-10 sm:pt-14 xl:pt-12 pb-10 sm:pb-14 lg:pb-12 relative rounded-lg bg-bravo">
                <div class="relative flex flex-col justify-center">

                    <h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-white ">What we&#39;re about...</h1>

                    <div class="block prose xl:prose-xl mt-8 prose-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
    <ul class="container flex min-w-0">

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline ">Lorem</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline ">Ipsum</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline truncate" aria-current="page">Dolor</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

    </ul>
</nav>

<div class="js-component relative z-0 component-spacer-margin">
    <div class="container">

        <div class="max-w-screen-md mx-auto">
            <div class="prose xl:prose-lg max-w-none">
                <h2>Contacting us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    <li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li>
                </ul>
            </div>
        </div>

    </div>
</div>

<div class="js-component relative z-0 component-spacer-margin">
    <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>
 
{% render "@hero-variant-2--bravo-colour", hero, true  %}

{% if breadcrumbs %}
    {% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}

{% for component in componentsList %}
    {% render "@" + component.name, component.data, true  %}
{% endfor %}
 
{
  "siteName": "MentorKit Pattern Library",
  "pageName": "Contact Us",
  "hero": {
    "heading": "What we're about...",
    "caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    "link": null,
    "image": {
      "src": "images/test-imagery/example5@16-6@2000w.jpg",
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-6@2000w.jpg",
          "size": 1200
        }
      ],
      "mdMax": {
        "srcSet": [
          {
            "url": "images/test-imagery/example5@16-10@1200w.jpg",
            "size": 1200
          }
        ]
      }
    }
  },
  "breadcrumbs": [
    {
      "text": "Lorem",
      "url": "./"
    },
    {
      "text": "Ipsum",
      "url": "./"
    },
    {
      "text": "Dolor",
      "url": "./"
    }
  ],
  "componentsList": [
    {
      "name": "rich-text-component",
      "data": {
        "text": "<h2>Contacting us</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li></ul>"
      }
    },
    {
      "name": "form-component"
    }
  ]
}

No notes defined.