MentorKit Pattern Library

Hero Variant 2: Default 

<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-grey-50">
    <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-grey-50">
                <div class="relative flex flex-col justify-center">

                    <h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-grey-800 ">Title here</h1>

                    <div class="block prose xl:prose-xl mt-8 ">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id magna dolor.</p>
                    </div>

                    <div class="mt-6">

                        <a href="./.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">

                            Find out more

                        </a>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
{% if buttonColour %}
    {% set buttonModifier = buttonColour %}
{% else %}
    {% set buttonModifier = 'default' %}
{% endif %}

{% if theme %}
    {% set bgColourClass = theme.bgColour %}
    {% set textColourClass = theme.textColour %}
    {% set richTextColourClass = theme.richTextColour %}
{% else %}
    {% set bgColourClass = 'bg-grey-50' %}
    {% set textColourClass = 'text-grey-800' %}
    {% set richTextColourClass = '' %}
{% endif %}

<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 {{ bgColourClass }}">
    <div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
        {% if image %}
            {% render "@image-frame", { src: image.src, srcSet: image.srcSet, mdMax: image.mdMax, modifier: 'h-full object-cover', frameModifier: 'h-full', width: image.width, height: image.height } %}
        {% elseif backgroundVideo %}
            <div class="aspect-[16/10] lg:aspect-[16/6]"></div>
            <video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
                <source src="{{backgroundVideo.src}}" type="video/mp4">
            </video>
        {% endif %}
    </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 {{ bgColourClass }}">
                <div class="relative flex flex-col justify-center">
                    {% if heading %}
                        <h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight {{textColourClass}} ">{{ heading }}</h1>
                    {% endif %}
                    {% if caption %}
                        <div class="block prose xl:prose-xl mt-8 {{richTextColourClass}}">
                            <p>{{ caption }}</p>
                        </div>
                    {% endif %}
                    {% if link %}
                        <div class="mt-6">
                            {% render "@button--" + buttonModifier, link, true %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library",
  "heading": "Title here",
  "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id magna dolor.",
  "image": {
    "src": "images/test-imagery/example5@16-6@2000w.jpg",
    "width": 1920,
    "height": 720,
    "srcSet": [
      {
        "url": "images/test-imagery/example5@16-6@2000w.jpg",
        "size": 1200
      }
    ],
    "mdMax": {
      "width": 1200,
      "height": 750,
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-10@1200w.jpg",
          "size": 1200
        }
      ]
    }
  },
  "link": {
    "text": "Find out more",
    "url": "./"
  },
  "buttonColour": "default"
}

No notes defined.