@arcteryx/components-hero-banner

What is it?

Common Hero Banner component for Outdoor, Outlet and LEAF. This package exports ES, CJS, and UMD module definitions.

Install

npm install --save @arcteryx/components-hero-banner

Usage

Note, it will be up to the consuming application to create a Hero Banner object to pass to the component. This object below shows all the options you can pass into the bannerData prop:

  const bannerData = {
    // Additional options
    useTitleAsHeading: true,
    headingTextTransform: "uppercase",
    enableDefaultHeight: false,
    displayFlexContent: true,
    alignContent: "center",
    // Content from CMS
    handle: "mens/shell-jackets",
    title: "Men's Shell Jackets",
    textColour: "FFFFFF",
    backgroundPosition: "center",
    backgroundImage: "https://arc-cms-prod.imgix.net/content/2022-07/2000x420_F22_CatBanner_Mens_ShellJackets.jpg",
    maxWidth: null,
    content: "Heavy coastal rain, deep mountain snow, chilling wind. These are the men’s shell jackets built to manage the elements’ harshest realities.",
    breadcrumbs: [
      {
        label: "Arc'teryx",
        url: "/"
      },
      {
        label: "Men's",
        url: "/c/mens"
      },
      {
        label: "Shell Jackets",
        url: "/c/mens/shell-jackets"
      }
    ],
    productCallout: [
      {
        label: "Acrux LT GTX Boot",
        url: "/shop/acrux-lt-gtx-boot",
        direction: "left",
        colour: "#FFFFFF",
        type: "none",
        horizontalPosition: 70,
        verticalPosition: 50
      }
    ],
    productOutfit: [
      {
        label: "Taema Tank Women's",
        url: "/shop/womens/taema-tank"
      },
      {
        label: "Konseal Pant Women's",
        url: "/shop/womens/konseal-pant"
      },
      {
        label: "Konseal Harness Women's",
        url: "/shop/womens/konseal-harness"
      }
    ],
    cta: [
      {
        label: "FIND YOUR JACKET",
        url: "/shop/jacket-finder/mens/",
        meta: {
            type: "Button"
        }
      }
    ]
  }

Pass props to Hero Banner component:

<HeroBanner
  bannerData={bannerData}
  bannerType={category-intro} // not required: category-intro or full-page
  market={market}
  appWebview={true} // user agent for mobile app
  onCtaMouseDown={onCtaMouseDown} // for analytics tracking
  onProductCalloutMouseDown={onProductCalloutMouseDown} // for analytics tracking
  onProductOutfitMouseDown={onProductOutfitMouseDown} // for analytics tracking
/>