Article List

<div class="js-component relative z-0 pt-26 lg:min-h-[600px]">
    <div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>

    <div class="bg-gradient-to-l bg-brand-gradient absolute top-0 left-0 w-full h-[80%] lg:h-full z-0 mob-hero-slant-clip-path lg:hero-slant-clip-path"></div>
    <div class="relative z-20">
        <div class="container flex flex-col lg:flex-row lg:items-center lg:gap-6">
            <div class="lg:min-h-[435px] flex-1 flex items-center pb-12 lg:pb-0 ">
                <div class="text-left">

                    <h1>

                        <span class="text-white font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)]  [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">Latest</span>

                        <span class="text-white font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)]  [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">News</span>

                    </h1>

                    <div class="mt-6 text-white font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white hero-text leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>

                </div>
            </div>
            <div class="relative z-10 flex-1 flex lg:-mb-48">

                <picture class="block overflow-hidden rounded-[12px] w-full">

                    <img class="lazyload  w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/eros@16-10@1200w.png 1200w" data-src="/front-end/images/test-imagery/eros@16-10@1200w.png">

                </picture>

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

<div class="min-h-[300px]" id="listing">
    <div data-vue-module="ContentListing" data-root-nodes="1073,1023" data-search-configuration='{&quot;id&quot;:1234,&quot;resultsPerPage&quot;:6,&quot;listingType&quot;:&quot;3 Column List&quot;,&quot;paginationType&quot;:&quot;Pagination&quot;,&quot;apiUrl&quot;:&quot;/front-end/mock-json/articles/list.json&quot;,&quot;fieldFilters&quot;:[{&quot;label&quot;:&quot;Example Single Filter&quot;,&quot;aliases&quot;:&quot;topics&quot;,&quot;filterType&quot;:&quot;Dropdown&quot;,&quot;source&quot;:[{&quot;name&quot;:&quot;Insights&quot;,&quot;tagName&quot;:&quot;Insights&quot;,&quot;id&quot;:1234},{&quot;name&quot;:&quot;Events&quot;,&quot;tagName&quot;:&quot;Events&quot;,&quot;id&quot;:1235},{&quot;name&quot;:&quot;Company announcements&quot;,&quot;tagName&quot;:&quot;Company announcements&quot;,&quot;id&quot;:1236},{&quot;name&quot;:&quot;Regulatory updates&quot;,&quot;tagName&quot;:&quot;Regulatory updates&quot;,&quot;id&quot;:1237},{&quot;name&quot;:&quot;Community involvement&quot;,&quot;tagName&quot;:&quot;Community involvement&quot;,&quot;id&quot;:1238},{&quot;name&quot;:&quot;Awards&quot;,&quot;tagName&quot;:&quot;Awards&quot;,&quot;id&quot;:1239},{&quot;name&quot;:&quot;Sustainability&quot;,&quot;tagName&quot;:&quot;Sustainability&quot;,&quot;id&quot;:1240},{&quot;name&quot;:&quot;Technology&quot;,&quot;tagName&quot;:&quot;Technology&quot;,&quot;id&quot;:1241},{&quot;name&quot;:&quot;Case studies&quot;,&quot;tagName&quot;:&quot;Case studies&quot;,&quot;id&quot;:1242},{&quot;name&quot;:&quot;Research, Tech and Innovation&quot;,&quot;tagName&quot;:&quot;Research, Tech and Innovation&quot;,&quot;id&quot;:1289}]},{&quot;label&quot;:&quot;Example Multi-Filter&quot;,&quot;aliases&quot;:&quot;Locations&quot;,&quot;filterType&quot;:&quot;Multi-Select Dropdown&quot;,&quot;source&quot;:[{&quot;name&quot;:&quot;Scotland&quot;,&quot;tagName&quot;:&quot;Scotland&quot;,&quot;id&quot;:1234},{&quot;name&quot;:&quot;Northern Ireland&quot;,&quot;tagName&quot;:&quot;Northern Ireland&quot;,&quot;id&quot;:1236},{&quot;name&quot;:&quot;Northern England&quot;,&quot;tagName&quot;:&quot;Northern England&quot;,&quot;id&quot;:1237},{&quot;name&quot;:&quot;North Wales&quot;,&quot;tagName&quot;:&quot;North Wales&quot;,&quot;id&quot;:1238},{&quot;name&quot;:&quot;Midlands&quot;,&quot;tagName&quot;:&quot;Midlands&quot;,&quot;id&quot;:1239},{&quot;name&quot;:&quot;Eastern England&quot;,&quot;tagName&quot;:&quot;Eastern England&quot;,&quot;id&quot;:1241},{&quot;name&quot;:&quot;South Wales&quot;,&quot;tagName&quot;:&quot;South Wales&quot;,&quot;id&quot;:1242},{&quot;name&quot;:&quot;South East England&quot;,&quot;tagName&quot;:&quot;South East England&quot;,&quot;id&quot;:1243},{&quot;name&quot;:&quot;South West&quot;,&quot;tagName&quot;:&quot;South West&quot;,&quot;id&quot;:1244},{&quot;name&quot;:&quot;Southern England&quot;,&quot;tagName&quot;:&quot;Southern England&quot;,&quot;id&quot;:1245}]},{&quot;label&quot;:&quot;Name Search&quot;,&quot;aliases&quot;:&quot;nodeName&quot;,&quot;filterType&quot;:&quot;Free Text&quot;,&quot;source&quot;:[]}]}'></div>
</div>