Component Browser
BrowseBuild
Home/Browse/Header 140

Header 140

ImageButtons25 nodes · 23 styles
Header 140

Description

A hero section with left-aligned content above an animated horizontal image slider featuring overlapping cards that scroll across the viewport.

Detailed Analysis

This header component features left-aligned content at the top with a bold headline, supporting paragraph, and dual CTA buttons (primary filled, secondary outlined). Below the content sits an animated horizontal carousel/slider showcasing multiple image cards. The images use a stacked, overlapping card design with different aspect ratios (landscape and portrait), creating visual depth as they slide horizontally. Partial images are visible on both edges, suggesting continuous scrolling. The animation creates an engaging, dynamic hero experience.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

animated heroimage sliderhorizontal carouselscrolling imagesoverlapping cardsanimated headerimage galleryslider componentcard stackdynamic heroleft aligneddual CTAscroll animation

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3457",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-705",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-705-p"
            }
          ],
          "target": {
            "id": "6540ac58fa7ea7efe569683a|24e28f1d-1f47-17c5-a194-a61dcb0e5498",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe569683a|24e28f1d-1f47-17c5-a194-a61dcb0e5498",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1708610317965,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-3458",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-706",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              
... (truncated)