BIR Pattern Library

Hero Variant 1: Gradient Alpha 

<div class="js-component relative">
    <div class="absolute w-full h-full top-0 left-0 gradient-alpha z-0 opacity-30 lg:opacity-100"></div>

    <div class="container flex flex-col lg:flex-row lg:items-center gap-8 py-8 lg:py-16  relative z-20 lg:min-h-[250px]">
        <div class="flex-1 flex order-last lg:order-first lg:items-center">
            <div class="items-start lg:text-left flex flex-col w-full">

                <div class="uppercase font-semibold font-heading leading-tight ">
                    Pre Heading
                </div>

                <h1 class="text-6xl lg:text-9xl font-medium font-heading leading-tight ">
                    Where the future of imaging began

                    <span class="font-medium font-heading leading-none text-alpha-600">
                        Extra Colour
                    </span>

                </h1>

                <div class="max-w-xl prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-6 ">
                    <p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>

                <div class="mt-6">

                    <a href="./.html" 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">

                            Find out more

                        </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>

                    </a>

                </div>

            </div>
        </div>

        <div class="relative z-10 flex-1 order-first lg:order-last">

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

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

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

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

            </picture>

        </div>

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

{% if theme %}
    {% set bgColourClass = theme.bgColour %}
    {% set textColourClass = theme.textColour %}
    {% set textColourHeadingClass = theme.textColourHeading %}
    {% set richTextColourClass = theme.richTextColour %}
{% else %}
    {% set bgColourClass = 'bg-grey-50' %}
    {% set textColourClass = 'text-bravo-900' %}
    {% set textColourHeadingClass = 'text-alpha-600' %}
    {% set richTextColourClass = 'prose-bravo-900' %}
{% endif %}

<div class="js-component relative">
    <div class="absolute w-full h-full top-0 left-0 {{bgColourClass}} z-0 opacity-30 lg:opacity-100"></div>
    {% if theme.bgColour == 'gradient-dark' %}
        <div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
    {% endif %}
    <div class="container flex flex-col lg:flex-row lg:items-center gap-8 py-8 lg:py-16  relative z-20 lg:min-h-[250px]">
        <div class="flex-1 flex order-last lg:order-first lg:items-center">
            <div class="items-start lg:text-left flex flex-col w-full">
                {% if preHeading %}
                    <div class="uppercase font-semibold font-heading leading-tight {{ textColourClass }}">
                        {{ preHeading }}
                    </div>
                {% endif %}
                {% if heading %}
                    <h1 class="text-6xl lg:text-9xl font-medium font-heading leading-tight {{ textColourClass }}">
                        {{ heading }}
                        {% if colourHeading %}    
                            <span class="font-medium font-heading leading-none {{ textColourHeadingClass }}">
                                {{ colourHeading }}
                            </span>
                        {% endif %}
                    </h1>
                {% endif %}
                {% if caption %}
                    <div class="max-w-xl prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-6 {{ richTextColourClass }}">
                        {{ caption| safe   }}
                    </div>
                {% endif %}
                {% if link %}
                    <div class="mt-6">
                        {% render "@button--" + buttonModifier, link, true %}
                    </div>
                {% endif %}
            </div>
        </div>
        {% if image or backgroundVideo %}
            <div class="relative z-10 flex-1 order-first lg:order-last">
                {% if image %}
                    {% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: 'h-full object-cover rounded-xl', 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 rounded-xl" muted autoplay loop playsinline>
                        <source src="{{backgroundVideo.src}}" type="video/mp4">
                    </video>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
 
{
  "siteName": "BIR Pattern Library",
  "preHeading": "Pre Heading",
  "heading": "Where the future of imaging began",
  "colourHeading": "Extra Colour",
  "caption": "<p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
  "buttonColour": "bravo",
  "image": {
    "src": "images/test-imagery/example5@16-10@1200w.jpg",
    "srcSet": [
      {
        "url": "images/test-imagery/example5@16-10@1200w.jpg",
        "size": 1200
      }
    ],
    "mdMax": {
      "width": 1920,
      "height": 720,
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-6@2000w.jpg",
          "size": 1200
        }
      ]
    },
    "smMax": {
      "width": 1200,
      "height": 750,
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-10@1200w.jpg",
          "size": 1200
        }
      ]
    }
  },
  "link": {
    "text": "Find out more",
    "url": "./"
  },
  "theme": {
    "textColourHeading": "text-alpha-600",
    "bgColour": "gradient-alpha"
  }
}

No notes defined.