Gigaclear Pattern Library

Mega Card 

<div class="flex-grow-0 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">

    <a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border  relative overflow-hidden group" href="./index.html">
        <div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
        <div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">

            <picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">

                <img class="lazyload  w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">

            </picture>
        </div>
        <div>
            <h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">Our markets</h2>
            <p class="text-grey-600 leading-snug text-base xl:text-lg"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
        </div>
    </a>
</div>
 
<div class="flex-grow-0 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
    {% if colHeading %}
        <h2 class="font-heading font-extrabold leading-tight text-2xl text-bravo mb-2 lg:pb-2">
            {{ colHeading }}
        </h2>
    {% endif %}
    <a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border  relative overflow-hidden group" href="{{ url | path}}">
        <div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
        <div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">
            {% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 675, frameModifier: 'transition ease-in-out duration-300 group-hover:scale-110' } %}
        </div>
        <div>
            <h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">{{ heading }}</h2>
            <p class="text-grey-600 leading-snug text-base xl:text-lg"> {{description}} </p>
        </div>
    </a>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "url": "./index",
  "heading": "Our markets",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
  "image": {
    "src": "images/test-imagery/example1@16-9@1200w.jpg",
    "srcSet": [
      {
        "url": "images/test-imagery/example1@16-9@1200w.jpg",
        "size": "1200"
      }
    ]
  }
}

No notes defined.