Card Carousel Component

Ready

HTML
View
Context
Info
Notes


        
        <div class="js-component component-spacer-padding bg-grey-50 relative z-0 overflow-x-hidden w-full sm:pl-16 xl:pl-0 lg:grid xl:breakout-screen-xl 2xl:breakout-screen-2xl">

    <div class="lex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1 relative z-20">
        <div class="w-full mx-auto max-w-screen-xsm sm:max-w-none xl:w-10/12 2xl:w-9/12 xl:mx-0 px-4 pt-0 pb-4 xl:py-12 2xl:px-6">
            <h2 class=" text-4xl mb-6 font-heading font-medium leading-tight">Markets</h2>
            <div class="mb-8 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal xl:prose-lg">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.</p>
            </div>

            <a href="./index.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 class="w-full h-full overflow-hidden pl-4 pt-4 relative xl:row-start-1 xl:col-start-6 xl:col-end-15 z-20">
        <div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"updateOnMove":true,"breakpoints":{"640":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"800":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"4rem"}},"1180":{"perPage":4,"arrows":true,"gap":"1.5rem","padding":{"right":"8rem"}},"1284":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"8rem"}}}}'>
            <div class="splide__track !overflow-visible">
                <div class="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  justify-center text-center items-center 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">Automotive</h2>

                            </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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-12@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  justify-center text-center items-center 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">Aviation</h2>

                            </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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-12@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  justify-center text-center items-center 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">Building services</h2>

                            </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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-12@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  justify-center text-center items-center 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</h2>

                            </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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-12@1200w.jpg">

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

                    </div>

                </div>
            </div>
            <div class="flex items-center lg:w-6/12 xl:w-4/12 mt-5">
                <div class="splide__arrows flex justify-center items-center lg:block">
                    <div class="flex gap-4">
                        <button class="group splide__arrow splide__arrow--prev w-8 h-8 rounded-full flex items-center bg-alpha-700 hover:bg-alpha-900 border-alpha-700 hover:border-alpha-900 text-white justify-center border transition ease-in-out duration-300">
                            <div class="rotate-90">
                                <svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                </svg>
                            </div>
                            <span class="sr-only text-bravo-900 hover:text-white">Previous</span>
                        </button>
                        <button class="group splide__arrow splide__arrow--next w-8 h-8 rounded-full flex items-center bg-alpha-700 hover:bg-alpha-900 border-alpha-700 hover:border-alpha-900 text-white justify-center border transition ease-in-out duration-300">
                            <div class="-rotate-90">
                                <svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
                                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                                </svg>
                            </div>
                            <span class="sr-only text-bravo-900 hover:text-white">Next</span>
                        </button>
                    </div>
                </div>
                <div class="flex flex-1 justify-center items-center px-4">
                    <div class="w-full">
                        <div class="bg-grey-300 rounded-full splide-progress-bar overflow-hidden">
                            <div class="h-2 w-0 bg-alpha-700 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        {% if buttonColour %}
    {% set buttonModifier = buttonColour %}
{% else %}
    {% set buttonModifier = 'default' %}
{% endif %}

{% set buttonClass = "rounded-full flex items-center bg-alpha-700 hover:bg-alpha-900 border-alpha-700 hover:border-alpha-900 text-white justify-center border" %}

<div class="js-component component-spacer-padding bg-grey-50 relative z-0 overflow-x-hidden w-full sm:pl-16 xl:pl-0 lg:grid xl:breakout-screen-xl 2xl:breakout-screen-2xl">
    {% if bgContrast %}
        <div class="absolute w-full h-full top-0 left-0 gradient-alpha opacity-50 z-10"></div>
    {% endif %}
    <div class="lex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1 relative z-20">
        <div class="w-full mx-auto max-w-screen-xsm sm:max-w-none xl:w-10/12 2xl:w-9/12 xl:mx-0 px-4 pt-0 pb-4 xl:py-12 2xl:px-6">
            <h2 class="{{headingColourClass}} text-4xl mb-6 font-heading font-medium leading-tight">{{heading}}</h2>
            <div class="mb-8 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal xl:prose-lg">
                <p>{{description}}</p>
            </div>
            {% render "@button--" + buttonModifier, link, true %}
        </div>
     </div>
     <div class="w-full h-full overflow-hidden pl-4 pt-4 relative xl:row-start-1 xl:col-start-6 xl:col-end-15 z-20">
            <div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
                <div class="splide__track !overflow-visible">
                    <div class="splide__list">
                        {% for item in cardList %}
                            <div class="splide__slide">
                                {% render "@content-card", {
                                    heading: item.heading,
                                    copy: '',
                                    centerText: true,
                                    orderImageFirst: true,
                                    image: item.image,
                                    bgContrast: true
                                }, true %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="flex items-center lg:w-6/12 xl:w-4/12 mt-5">
                    <div class="splide__arrows flex justify-center items-center lg:block">
                        <div class="flex gap-4">
                            <button class="group splide__arrow splide__arrow--prev w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300">
                                <div class="rotate-90">
                                    {% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
                                </div>
                                <span class="sr-only text-bravo-900 hover:text-white">Previous</span>
                            </button>
                            <button class="group splide__arrow splide__arrow--next w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300">
                                <div class="-rotate-90">
                                    {% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
                                </div>
                                <span class="sr-only text-bravo-900 hover:text-white">Next</span>
                            </button>
                        </div>
                    </div>
                    <div class="flex flex-1 justify-center items-center px-4">
                        <div class="w-full">
                            <div class="bg-grey-300 rounded-full splide-progress-bar overflow-hidden">
                                <div class="h-2 w-0 bg-alpha-700 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
     </div>
</div>


        
            
            {
  "siteName": "BIR Pattern Library",
  "heading": "Markets",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.",
  "buttonColour": "bravo",
  "link": {
    "text": "Find out more",
    "url": "./index"
  },
  "cardList": [
    {
      "heading": "Automotive",
      "image": {
        "src": "images/test-imagery/example1@16-12@1200w.jpg",
        "width": 1200,
        "height": 900,
        "srcSet": [
          {
            "url": "images/test-imagery/example1@16-12@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Aviation",
      "image": {
        "src": "images/test-imagery/example11@16-12@1200w.jpg",
        "width": 1200,
        "height": 900,
        "srcSet": [
          {
            "url": "images/test-imagery/example11@16-12@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Building services",
      "image": {
        "src": "images/test-imagery/example3@16-12@1200w.jpg",
        "width": 1200,
        "height": 900,
        "srcSet": [
          {
            "url": "images/test-imagery/example3@16-12@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    },
    {
      "heading": "Lorem ipsum dolor sit amet",
      "image": {
        "src": "images/test-imagery/example4@16-12@1200w.jpg",
        "width": 1200,
        "height": 900,
        "srcSet": [
          {
            "url": "images/test-imagery/example4@16-12@1200w.jpg",
            "size": "1200"
          }
        ]
      }
    }
  ],
  "sliderData": {
    "perPage": 1,
    "mediaQuery": "min",
    "pagination": false,
    "arrows": true,
    "gap": "1.5rem",
    "padding": {
      "right": "4.5rem"
    },
    "updateOnMove": true,
    "breakpoints": {
      "640": {
        "perPage": 2,
        "arrows": true,
        "gap": "1.5rem",
        "padding": {
          "right": "4.5rem"
        }
      },
      "800": {
        "perPage": 3,
        "arrows": true,
        "gap": "1.5rem",
        "padding": {
          "right": "4rem"
        }
      },
      "1180": {
        "perPage": 4,
        "arrows": true,
        "gap": "1.5rem",
        "padding": {
          "right": "8rem"
        }
      },
      "1284": {
        "perPage": 3,
        "arrows": true,
        "gap": "1.5rem",
        "padding": {
          "right": "8rem"
        }
      }
    }
  }
}

Handle: @card-carousel-component
Preview:
- With layout
- Component only
Filesystem Path: fractal\components\02-umbraco-repeatable-components\card-carousel-component\card-carousel-component.nunjucks
References (2): @content-card, @icon

No notes defined.