BIR Pattern Library

News 

<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-900 md:bg-transparent ">

    <div class="hero absolute w-full h-full z-10 hidden md:block"></div>

    <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/example4@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/example4@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@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="hero-mobile absolute w-full h-48 z-10 md:hidden -top-48"></div>

        <div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
            <div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl bg-bravo-900 md:bg-transparent">
                <div class="relative flex flex-col justify-center z-20">

                    <h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none text-white ">Latest news &amp; insights</h1>

                    <div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 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>

<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>
 
{% render "@hero-variant-2--gradient-background", hero, true %}

{% render "@article-listing" %}
 
{
  "siteName": "BIR Pattern Library",
  "pageName": "News",
  "hero": {
    "heading": "Latest news & insights",
    "caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    "link": null,
    "image": {
      "src": "images/test-imagery/example4@16-6@2000w.jpg",
      "srcSet": [
        {
          "url": "images/test-imagery/example4@16-6@2000w.jpg",
          "size": 1200
        }
      ],
      "mdMax": {
        "srcSet": [
          {
            "url": "images/test-imagery/example4@16-10@1200w.jpg",
            "size": 1200
          }
        ]
      }
    }
  },
  "breadcrumbs": [
    {
      "text": "Lorem",
      "url": "./"
    },
    {
      "text": "Ipsum",
      "url": "./"
    },
    {
      "text": "Dolor",
      "url": "./"
    }
  ]
}

No notes defined.