Gigaclear Pattern Library

Article Listing 

<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>
 
{% set searchConfiguration = {
  id: 1234,
  resultsPerPage: 6,
  listingType: "3 Column List",
  paginationType: "Pagination",
  apiUrl: "/front-end/mock-json/articles/list.json",
  fieldFilters: [
    {
      label: "Example Single Filter",
      aliases: "topics",
      filterType: "Dropdown",
      source: [
        { name: "Insights", tagName: "Insights", id: 1234 },
        { name: "Events", tagName: "Events", id: 1235 },
        { name: "Company announcements", tagName: "Company announcements", id: 1236 },
        { name: "Regulatory updates", tagName: "Regulatory updates", id: 1237 },
        { name: "Community involvement", tagName: "Community involvement", id: 1238 },
        { name: "Awards", tagName: "Awards", id: 1239 },
        { name: "Sustainability", tagName: "Sustainability", id: 1240 },
        { name: "Technology", tagName: "Technology", id: 1241 },
        { name: "Case studies", tagName: "Case studies", id: 1242 },
        { name: "Research, Tech and Innovation", tagName: "Research, Tech and Innovation", id: 1289 }
      ]
    },
    {
      label: "Example Multi-Filter",
      aliases: "Locations",
      filterType: "Multi-Select Dropdown",
      source: [
        { name: "Scotland", tagName: "Scotland", id: 1234 },
        { name: "Northern Ireland", tagName: "Northern Ireland", id: 1236 },
        { name: "Northern England", tagName: "Northern England", id: 1237 },
        { name: "North Wales", tagName: "North Wales", id: 1238 },
        { name: "Midlands", tagName: "Midlands", id: 1239 },
        { name: "Eastern England", tagName: "Eastern England", id: 1241 },
        { name: "South Wales", tagName: "South Wales", id: 1242 },
        { name: "South East England", tagName: "South East England", id: 1243 },
        { name: "South West", tagName: "South West", id: 1244 },
        { name: "Southern England", tagName: "Southern England", id: 1245 }
      ]
    },
    {
      label: "Name Search",
      aliases: "nodeName",
      filterType: "Free Text",
      source: []
    }
  ]
} | dump %}

<div class="min-h-[300px]" id="listing">
    <div data-vue-module="ContentListing" data-root-nodes="1073,1023" data-search-configuration='{{ searchConfiguration }}'></div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library"
}

No notes defined.