Event 20

ImageButtons3 ColumnsCards125 nodes · 44 styles

Description

Three-column event listing with left-aligned header, bordered cards featuring category badges and date/location metadata.

Detailed Analysis

This event section combines left-aligned header with bordered card styling in a three-column layout. The header area includes tagline, 'Events' title, description text, and a 'View all' button aligned to the right. The three event cards below have distinct black borders creating clear separation. Each card contains a tall image placeholder with category badge in the upper right corner. Below the image, date and location metadata appear with calendar and pin icons. Event title, description paragraph, and 'View event' link with arrow complete the card. The combination of left-aligned header, right-positioned button, and bordered cards creates a structured, professional appearance.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

eventsthree columnsbordered cardsleft headerview all buttoncategory badgedate metadatalocation iconcard bordersprofessional 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": "5340a7ad-39dd-a961-bbe7-886a66501f95",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "42d3da56-1270-0a14-d1b9-875bfda2cc58"
        ],
        "children": [
          "5340a7ad-39dd-a961-bbe7-886a66501f96"
        ]
      },
      {
        "_id": "5340a7ad-39dd-a961-bbe7-886a66501f96",
        "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": [
          "5340a7ad-39dd-a961-bbe7-886a66501f97"
        ]
      },
      {
        "_id": "5340a7ad-39dd-a961-bbe7-886a66501f97",
        "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": "5340a7ad-39dd-a961-bbe7-886a66501f95", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "42d3da56-1270-0a14-d1b9-875bfda2cc58" ], "children": [ "5340a7ad-39dd-a961-bbe7-886a66501f96" ] }, { "_id": "5340a7ad-39dd-a961-bbe7-886a66501f96", "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": [ "5340a7ad-39dd-a961-bbe7-886a66501f97" ] }, { "_id": "5340a7ad-39dd-a961-bbe7-886a66501f97", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)