MentorKit Pattern Library

Featured Article Card List Component: Contrast Bg 

<div class="js-component relative z-0 overflow-hidden lg:overflow-visible component-spacer-padding bg-grey-50">
    <div class="container ">

        <div class="text-center mb-8 lg:mb-12">
            <h2 class="text-6xl  block font-heading font-bold leading-tight text-bravo">News &amp; insights</h2>

        </div>

        <div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
            <div class="splide__track !overflow-visible">
                <div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">

                    <div class="splide__slide">

                        <a href="#" class="bg-white hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
                            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <div class="mb-4">

                                    <div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">

                                        test

                                    </div>

                                </div>

                                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                            </div>
                            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                                <div class="w-full h-full">

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

                                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">

                                    </picture>
                                </div>
                            </div>
                        </a>

                    </div>

                    <div class="splide__slide">

                        <a href="#" class="bg-white hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
                            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <div class="mb-4">

                                    <div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">

                                        This is a tag

                                    </div>

                                </div>

                                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                            </div>
                            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                                <div class="w-full h-full">

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

                                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">

                                    </picture>
                                </div>
                            </div>
                        </a>

                    </div>

                    <div class="splide__slide">

                        <a href="#" class="bg-white hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
                            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <div class="mb-4">

                                    <div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">

                                        This is a tag

                                    </div>

                                </div>

                                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                            </div>
                            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                                <div class="w-full h-full">

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

                                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">

                                    </picture>
                                </div>
                            </div>
                        </a>

                    </div>

                    <div class="splide__slide">

                        <a href="#" class="bg-white hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
                            <div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <div class="mb-4">

                                    <div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">

                                        This is a tag

                                    </div>

                                </div>

                                <h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                            </div>
                            <div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
                                <div class="w-full h-full">

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

                                        <img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">

                                    </picture>
                                </div>
                            </div>
                        </a>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}

<div class="js-component relative z-0 overflow-hidden lg:overflow-visible {{bgClass}}">
    <div class="container ">
        {% render "@headline", headline %}
        <div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
            <div class="splide__track !overflow-visible">
                <div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
                    {% for item in cardList %}
                        <div class="splide__slide">
                            {% render "@content-card", { 
                                heading: item.heading, 
                                image: item.image, copy: '', 
                                tag: item.tag, 
                                orderImageFirst: true,
                                bgContrast: bgContrast 
                            }, true %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library",
  "headline": {
    "heading": "News & insights"
  },
  "cardList": [
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": {
        "tag": "true",
        "text": "test",
        "url": "./index"
      },
      "image": {
        "src": "images/test-imagery/example4@16-10@1200w.jpg",
        "srcSet": [
          {
            "url": "images/test-imagery/example4@16-10@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": {
        "tag": "true",
        "text": "This is a tag",
        "url": "./index"
      },
      "image": {
        "src": "images/test-imagery/example3@16-10@1200w.jpg",
        "srcSet": [
          {
            "url": "images/test-imagery/example3@16-10@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": {
        "tag": "true",
        "text": "This is a tag",
        "url": "./index"
      },
      "image": {
        "src": "images/test-imagery/example2@16-10@1200w.jpg",
        "srcSet": [
          {
            "url": "images/test-imagery/example2@16-10@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": {
        "tag": "true",
        "text": "This is a tag",
        "url": "./index"
      },
      "image": {
        "src": "images/test-imagery/example1@16-10@1200w.jpg",
        "srcSet": [
          {
            "url": "images/test-imagery/example1@16-10@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    }
  ],
  "sliderData": {
    "perPage": 1,
    "mediaQuery": "min",
    "pagination": true,
    "arrows": false,
    "gap": "1.5rem",
    "padding": {
      "right": "4.5rem"
    },
    "breakpoints": {
      "768": {
        "perPage": 2,
        "mediaQuery": "min",
        "pagination": true,
        "arrows": false,
        "gap": "1.5rem",
        "padding": {
          "right": "0rem"
        }
      },
      "1024": {
        "destroy": true
      }
    }
  },
  "bgContrast": true
}
  • Handle: @featured-article-card-list-component--contrast-bg
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\featured-article-card-list-component\featured-article-card-list-component.nunjucks
  • References (2): @headline, @content-card

No notes defined.