BIR 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 lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">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-transparent flex  px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
                            <div class="flex relative z-10 flex-col  flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <h2 class="relative  text-xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                                <ul class="mt-4 flex gap-1">

                                    <div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">

                                        News

                                    </div>

                                </ul>

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

                                    <picture class="block overflow-hidden rounded-lg 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-transparent flex  px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
                            <div class="flex relative z-10 flex-col  flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <h2 class="relative  text-xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                                <ul class="mt-4 flex gap-1">

                                    <div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">

                                        News

                                    </div>

                                </ul>

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

                                    <picture class="block overflow-hidden rounded-lg 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-transparent flex  px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
                            <div class="flex relative z-10 flex-col  flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <h2 class="relative  text-xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                                <ul class="mt-4 flex gap-1">

                                    <div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">

                                        News

                                    </div>

                                </ul>

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

                                    <picture class="block overflow-hidden rounded-lg 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/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">

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

                    </div>

                    <div class="splide__slide">

                        <a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex  px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
                            <div class="flex relative z-10 flex-col  flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">

                                <h2 class="relative  text-xl  font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>

                                <ul class="mt-4 flex gap-1">

                                    <div class="tag bg-charlie text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">

                                        Event

                                    </div>

                                </ul>

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

                                    <picture class="block overflow-hidden rounded-lg 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: "white" 
                            }, true %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "BIR Pattern Library",
  "headline": {
    "heading": "News & insights"
  },
  "cardList": [
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": [
        {
          "tag": "true",
          "bgColour": "bg-bravo-200",
          "text": "News",
          "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",
          "bgColour": "bg-bravo-200",
          "text": "News",
          "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",
          "bgColour": "bg-bravo-200",
          "text": "News",
          "url": "./index"
        }
      ],
      "image": {
        "src": "images/test-imagery/example11@16-10@1200w.jpg",
        "srcSet": [
          {
            "url": "images/test-imagery/example11@16-10@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "tag": [
        {
          "tag": "true",
          "text": "Event",
          "url": "./index",
          "bgColour": "bg-charlie"
        }
      ],
      "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.