Article List

<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-bravo">
    <div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">

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

            <source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w">

            <img class="lazyload h-full object-cover w-full" alt="" width="1920" height="720" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example5@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-6@2000w.jpg">

        </picture>

    </div>
    <div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
        <div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
            <div class="px-4 md:px-20 md:w-8/12 lg:w-6/12 xl:w-5/12 pt-10 sm:pt-14 xl:pt-12 pb-10 sm:pb-14 lg:pb-12 relative rounded-lg bg-bravo">
                <div class="relative flex flex-col justify-center">

                    <h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-white ">Latest news &amp; insights</h1>

                    <div class="block prose xl:prose-xl mt-8 prose-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
    <ul class="container flex min-w-0">

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline ">Lorem</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline ">Ipsum</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

        <li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
            <a href="./.html" class="hover:underline truncate" aria-current="page">Dolor</a>
            <div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
                <svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
                    <use href="/front-end/sprite.svg#icon-chevron"></use>
                </svg>
            </div>
        </li>

    </ul>
</nav>

<div class="min-h-[300px]" id="listing">
    <div data-vue-module="ContentListing" data-search-configuration-api="/front-end/mock-json/articles/searchConfiguration.json" data-root-nodes="1073,1023" data-search-configuration-id="1234"></div>
</div>