MentorKit Pattern Library

Mega Card 

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

    <a class="bg-white p-6 block rounded-md transition ease-in-out duration-150 hover:shadow-xl" href="./index.html">
        <div class="mb-4">

            <picture class="block overflow-hidden rounded-md 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-semibold mb-1">Our markets</h2>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
        </div>
    </a>
</div>
 
<div class="flex-grow-0 p-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
    {% if colHeading %}
        <h2 class="font-heading font-bold leading-tight text-lg lg:text-xl font lg:border-b lg:border-grey-400 text-bravo mb-5 lg:pb-2">
            {{ colHeading }}
        </h2>
    {% endif %}
    <a class="bg-white p-6 block rounded-md transition ease-in-out duration-150 hover:shadow-xl" href="{{ url | path}}">
        <div class="mb-4">
            {% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 675, frameModifier: 'rounded-md' } %}
        </div>
        <div>
            <h2 class="text-bravo font-semibold mb-1">{{ heading }}</h2>
            <p> {{description}} </p>
        </div>
    </a>
</div>
 
{
  "siteName": "MentorKit 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.