Blog 16

ImageButtons2 ColumnsCards127 nodes · 43 styles

Description

Blog listing section with centered header, category filter, and 2x2 grid of horizontal article cards featuring side-by-side image and content with category badges and read more links.

Detailed Analysis

This blog layout presents a centered header with 'Blog' label, large heading, and description text. Category filtering includes bordered 'View all' button and category links. Articles display in a 2x2 grid of horizontal cards. Each card shows a portrait image on the left with content on the right including category badge (dark pill), reading time, article title, truncated excerpt, and 'Read more' link with chevron. The horizontal format creates an efficient, scannable layout.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

blog listinghorizontal cards2x2 gridside-by-side layoutcategory badgesread more linkscategory filterportrait imagesreading timepill badgeschevron CTAscompact layoutarticle cardsefficient design

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa336",
        "tag": "header",
        "data": {
          "tag": "header",
          "attr": {
            "id": "blog-header-16"
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "880f0821-e7f0-4b29-0da7-a9a65bc96142"
        ],
        "children": [
          "d0efc12f-a8ee-ec82-e98e-29bef8ffa337"
        ]
      },
      {
        "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa337",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "d0efc12f-a8ee-ec82-e98e-29bef8ffa338"
        ]
      },
      {
        "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa338",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude"
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa336", "tag": "header", "data": { "tag": "header", "attr": { "id": "blog-header-16" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "880f0821-e7f0-4b29-0da7-a9a65bc96142" ], "children": [ "d0efc12f-a8ee-ec82-e98e-29bef8ffa337" ] }, { "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa337", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b0934d9a-875a-bb42-0630-12090a77fc73" ], "children": [ "d0efc12f-a8ee-ec82-e98e-29bef8ffa338" ] }, { "_id": "d0efc12f-a8ee-ec82-e98e-29bef8ffa338", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude" ... (truncated)