MentorKit Pattern Library

Hero Variant 1: No Image 

<div class="js-component bg-grey-50">
    <div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
        <div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-14 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none mx-auto lg:mx-0">
            <div class="text-center items-center lg:items-start lg:text-left flex flex-col w-full pt-8 pb-16 lg:pt-0 lg:pb-0 lg:mt-0 px-4 xl:px-6">

                <h1 class="text-4xl lg: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 class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 relative z-0 lg:angled-mask">

        </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 {{bgColourClass}}">
    <div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
        <div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-14 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none mx-auto lg:mx-0">
            <div class="text-center items-center lg:items-start lg:text-left flex flex-col w-full pt-8 pb-16 lg:pt-0 lg:pb-0 lg:mt-0 px-4 xl:px-6">
                {% if heading %}
                    <h1 class="text-4xl lg: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 class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 relative z-0 lg:angled-mask">
            {% if image %}
                {% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: 'h-full object-cover', frameModifier: 'h-full', width: 1200, height: 750 } %}
            {% elseif backgroundVideo %}
                <div class="aspect-[16/10] md:aspect-[16/6] lg:aspect-[16/10]"></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>
</div>
 
{
  "siteName": "MentorKit Pattern Library",
  "heading": "Title here",
  "caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id magna dolor.",
  "image": "",
  "link": {
    "text": "Find out more",
    "url": "./"
  }
}

No notes defined.