Event 18

ImageButtons3 ColumnsCards122 nodes · 45 styles

Description

Three-column event listing with bordered cards featuring category badges, date/location metadata, and centered view all button.

Detailed Analysis

This event section variant combines three-column layout with bordered card styling. The centered header includes tagline, 'Events' title, and description. Each of the three event cards has a distinct black border creating clear visual boundaries. Cards contain tall image placeholders with category badges in the upper right corner. Below the image, date and location metadata appear with calendar and pin icons. The event title, description text, and 'View event' link with arrow complete each card. A centered 'View all' button appears below the card grid. The bordered design provides stronger visual separation between events while maintaining the clean three-column structure.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

eventsthree columnsbordered cardscategory badgedate metadatalocation iconcard bordersview all buttonevent gridcentered layout

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": "87fa762b-02d0-1a36-b559-f4e367566d56",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "995e55cd-4a94-374a-ac30-9d1a6e12d7d8"
        ],
        "children": [
          "87fa762b-02d0-1a36-b559-f4e367566d57"
        ]
      },
      {
        "_id": "87fa762b-02d0-1a36-b559-f4e367566d57",
        "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": [
          "87fa762b-02d0-1a36-b559-f4e367566d58"
        ]
      },
      {
        "_id": "87fa762b-02d0-1a36-b559-f4e367566d58",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (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": "87fa762b-02d0-1a36-b559-f4e367566d56", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "995e55cd-4a94-374a-ac30-9d1a6e12d7d8" ], "children": [ "87fa762b-02d0-1a36-b559-f4e367566d57" ] }, { "_id": "87fa762b-02d0-1a36-b559-f4e367566d57", "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": [ "87fa762b-02d0-1a36-b559-f4e367566d58" ] }, { "_id": "87fa762b-02d0-1a36-b559-f4e367566d58", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)