Humongotron

Ready

Main featurette component with attention grabbing features.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdHumongotron } from '@fbin-web/neighborhood-core';

Usage

<nbhd-humongotron>
  <nbhd-text
    slot="eyebrow"
    tag="div"
    variant="eyebrow">
    Elit Sem
  </nbhd-text>
  <nbhd-text
    variant="title"
    slot="title"
    tag="h2">
    Humongotron Title
  </nbhd-text>
  <nbhd-text
    slot="subtitle"
    variant="subtitle"
    tag="h3">
    Dapibus Porta
  </nbhd-text>
  <nbhd-text
    slot="content"
    tag="div">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  </nbhd-text>
  <nbhd-cta
    slot="cta"
    variant="primary"
    href="fun-cta-slide-1"
    external
    aria-label="Learn more about CTA 1"
    css-class="cta-tracking-mtr-1">
    CTA 1
  </nbhd-cta>
  <nbhd-image
    slot="media"
    loading="lazy"
    src="https://moen.widen.net/content/dxp6rtujzc/original/SmartWaterApp_Jumbotron.jpg"
    alt="Fun ALT Slide 1 for images"
    css-class="media-css-class-sld-1"
    crop
    image-focus="center">
  </nbhd-image>
</nbhd-humongotron>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdHumongotron } from '@fbin-web/neighborhood-react';

Usage

import { NbhdHumongotron, NbhdText, NbhdCta, NbhdImage } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdHumongotron background="secondary-light">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow">
        Elit Sem
      </NbhdText>
      <NbhdText
        variant="title"
        slot="title"
        tag="h2">
        Humongotron Title
      </NbhdText>
      <NbhdText
        slot="subtitle"
        variant="subtitle"
        tag="h3">
        Dapibus Porta
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="primary"
        href="fun-cta-slide-1"
        external
        ariaLabel="Learn more about CTA 1"
        ctaClass="cta-tracking-mtr-1">
        CTA 1
      </NbhdCta>
      <NbhdImage
        slot="media"
        loading="lazy"
        src="https://moen.widen.net/content/dxp6rtujzc/original/SmartWaterApp_Jumbotron.jpg"
        alt="Fun ALT Slide 1 for images"
        imgClass="media-css-class-sld-1"
        crop
        imageFocus="center"></NbhdImage>
    </NbhdHumongotron>
  </>
);

Media Dimensions

Image dimensions are preset by the component, so width and height do not need to be provided on nbhd-image. When using provider="widen", images are resized and cropped to these dimensions using image-focus as the crop point. The same dimensions apply to every layout: the contained layout tops out at 2000px, and the full layout scales the image past 2000px with object-fit: cover, keeping the image-focus point in view.

Breakpoint	Dimension	Aspect Ratio
`Small (≤767px)`	375px x 150px	2.5:1
`Medium (≥768px)`	768px x 307px	2.5:1
`Large (≥1024px)`	2000px x 800px	2.5:1

Properties

Property	Attribute	Type	Default	Description
`layout`	`layout`	`fullcontainedcompact`	`full`	Sets the humongotron layout mode for full-width, contained, or compact presentation.
`scrollIndicator`	`scroll-indicator`	`boolean`	`false`	Shows the scroll indicator. It only renders for standalone humongotron usage and is hidden inside carousel slides.
`scrollLabel`	`scroll-label`	`string`	`Scroll`	Accessible label displayed alongside the scroll indicator icon.
`overlayOpacity`	`overlay-opacity`	`number`	`35`	Sets the media overlay opacity from 0 to 100. From the lg breakpoint, where text sits on the image, it can’t go below the --nbhd-humongotron-mediaOverlay-minOpacity floor (35% by default). The floor doesn’t guarantee contrast on very light images: check that text over the image meets 4.5:1 (3:1 for large text) and raise the opacity if needed.
`alignment`	`alignment`	`startcenterend`	`start`	Horizontal content alignment within the content area.
`verticalPlacement`	`vertical-placement`	`topcenterbottom`	`center`	Vertical placement of the content block within the component.
`horizontalPlacement`	`horizontal-placement`	`startcenterend`	`start`	Horizontal placement of the content block within the media area.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the component surface theme. When a logo is present, the effective surface is adjusted automatically for contrast.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the top of the component. `default` = component's top padding `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the bottom of the component. `default` = component's bottom padding `none` = 0 `small` = 24px `medium` = 48px `large` = 96px

Slots

Name	Description
`media`	Media slot for the background image or video. The component renders a media layer and applies the overlay over this content.
`logo`	Optional logo slot rendered above the eyebrow and before the text content. Used for branded images or marks.
`eyebrow`	Eyebrow text slot displayed above the title. Intended for short introductory labels.
`title`	Primary title slot for the main headline content.
`subtitle`	Secondary title slot displayed beneath the main title.
`content`	Body copy slot for supporting text content.
`cta`	Call-to-action slot for a link or action element positioned in the detail panel.

CSS Parts

Name	Description
—	The outer `<section>` wrapper for the humongotron.
—	The media layer that contains the slotted media and the overlay.
—	The native slot element for the background media assignment.
—	The overlay layer applied over the media to control contrast and readability.
—	The text/content layer positioned over the media.
—	The `nbhd-container` wrapper for the detail content.
—	The inner body wrapper containing the rendered detail slots.
—	The logo slot rendered above the text content when provided.
—	The eyebrow slot rendered above the title.
—	The title slot for the primary headline content.
—	The subtitle slot displayed beneath the main title.
—	The supporting body-copy slot.
—	The call-to-action slot for the CTA element.
—	The wrapper for the scroll indicator when `scrollIndicator` is enabled.
—	The control wrapper inside the scroll indicator.
—	The icon container for the scroll arrow graphic.
—	The SVG element used for the scroll arrow.
—	The label text rendered beside the scroll arrow.

nbhd-humongotron::part() {
  /* your styles */
}

CSS Properties

Set these on nbhd-humongotron or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Humongotron

Property	Token	Value	Description
`--nbhd-humongotron-aspectRatio`	—	`auto`	—
`--nbhd-humongotron-blockSize`	—	`auto`	—
`--nbhd-humongotron-bpLg-aspectRatio`	—	`2000 / 800`	—
`--nbhd-humongotron-bpLg-minBlockSize`	`--nbhd-size-hero-minBlockSize`	`800px`	—
`--nbhd-humongotron-detail-alignItems`	—	`center`	—
`--nbhd-humongotron-detail-body-alignment`	—	`start`	—
`--nbhd-humongotron-detail-body-bpLg-paddingBlockEnd`	`--nbhd-space-12`	`48px`	—
`--nbhd-humongotron-detail-body-bpLg-paddingBlockStart`	`--nbhd-space-12`	`48px`	—
`--nbhd-humongotron-detail-body-display`	—	`flex`	—
`--nbhd-humongotron-detail-body-flexDirection`	—	`column`	—
`--nbhd-humongotron-detail-body-maxInlineSize`	—	`700px`	—
`--nbhd-humongotron-detail-body-paddingBlockEnd`	`--nbhd-space-6`	`24px`	—
`--nbhd-humongotron-detail-body-paddingBlockStart`	`--nbhd-space-6`	`24px`	—
`--nbhd-humongotron-detail-body-pulse-paddingBlockEnd`	`--nbhd-space-32`	`128px`	—
`--nbhd-humongotron-detail-display`	—	`flex`	—
`--nbhd-humongotron-detail-justifyContent`	—	`start`	—
`--nbhd-humongotron-detail-zIndex`	—	`3`	—
`--nbhd-humongotron-host-display`	—	`block`	—
`--nbhd-humongotron-host-inlineSize`	—	`100%`	—
`--nbhd-humongotron-inlineSize`	—	`100%`	—
`--nbhd-humongotron-logo-display`	—	`block`	—
`--nbhd-humongotron-logo-marginBlockEnd`	`--nbhd-space-5`	`20px`	—
`--nbhd-humongotron-logo-maxBlockSize`	`--nbhd-size-hero-logo-maxBlockSize`	`120px`	—
`--nbhd-humongotron-logo-maxInlineSize`	`--nbhd-size-hero-logo-maxInlineSize`	`190px`	—
`--nbhd-humongotron-marginInline`	`--nbhd-space-0`	`0px`	—
`--nbhd-humongotron-maxInlineSize`	—	`100%`	—
`--nbhd-humongotron-media-aspectRatio`	—	`375 / 150`	—
`--nbhd-humongotron-mediaOverlay-minOpacity`	`--nbhd-opacity-overlay-media`	`0.35`	Floor for the scrim behind text on the image (lg+): overlay-opacity can raise it but not go below this, so text never sits on a bare image (WCAG 1.4.3). It doesn't guarantee contrast on very light images; authors still check.
`--nbhd-humongotron-mediaOverlay-opacity`	`--nbhd-opacity-overlay-media`	`0.35`	—
`--nbhd-humongotron-minBlockSize`	—	`auto`	—
`--nbhd-humongotron-minInlineSize`	`--nbhd-size-container-min`	`320px`	—
`--nbhd-humongotron-position`	—	`relative`	—
`--nbhd-humongotron-scrollIndicator-alignItems`	—	`center`	—
`--nbhd-humongotron-scrollIndicator-display`	—	`flex`	—
`--nbhd-humongotron-scrollIndicator-flexDirection`	—	`column`	—
`--nbhd-humongotron-scrollIndicator-icon-backgroundColor`	`--nbhd-context-color-action-primary-background`	Adapts to surface	—
`--nbhd-humongotron-scrollIndicator-icon-blockSize`	`--nbhd-size-control-xl`	`44px`	—
`--nbhd-humongotron-scrollIndicator-icon-borderColor`	`--nbhd-context-color-action-primary-border`	Adapts to surface	—
`--nbhd-humongotron-scrollIndicator-icon-borderRadius`	`--nbhd-border-radius-full`	`9999px`	—
`--nbhd-humongotron-scrollIndicator-icon-borderStyle`	—	`solid`	—
`--nbhd-humongotron-scrollIndicator-icon-borderWidth`	`--nbhd-border-width-emphasis`	`2px`	—
`--nbhd-humongotron-scrollIndicator-icon-color`	`--nbhd-context-color-action-primary-foreground`	Adapts to surface	—
`--nbhd-humongotron-scrollIndicator-icon-fontWeight`	`--nbhd-typography-action-fontWeight`	`700`	—
`--nbhd-humongotron-scrollIndicator-icon-inlineSize`	`--nbhd-size-control-xl`	`44px`	—
`--nbhd-humongotron-scrollIndicator-insetBlockEnd`	—	`18px`	—
`--nbhd-humongotron-scrollIndicator-insetInlineStart`	—	`50%`	—
`--nbhd-humongotron-scrollIndicator-justifyContent`	—	`space-between`	—
`--nbhd-humongotron-scrollIndicator-label-fontWeight`	`--nbhd-typography-action-fontWeight`	`700`	—
`--nbhd-humongotron-scrollIndicator-label-letterSpacing`	—	`1px`	—
`--nbhd-humongotron-scrollIndicator-label-marginBlock`	`--nbhd-space-1 --nbhd-space-0`	`4px 0px`	—
`--nbhd-humongotron-scrollIndicator-position`	—	`absolute`	—
`--nbhd-humongotron-scrollIndicator-pulse-iterationCount`	—	`1`	One 3s pulse: automatic motion must stop within five seconds or be pausable (WCAG 2.2.2).
`--nbhd-humongotron-scrollIndicator-pulse-opacity`	—	`0`	—
`--nbhd-humongotron-scrollIndicator-pulse-shadowAlpha`	—	`0.1`	—
`--nbhd-humongotron-scrollIndicator-pulse-shadowSpread`	—	`48px`	—
`--nbhd-humongotron-scrollIndicator-pulse-zIndex`	`--nbhd-z-below`	`-1`	—
`--nbhd-humongotron-scrollIndicator-svg-size`	`--nbhd-size-icon-md`	`20px`	—
`--nbhd-humongotron-scrollIndicator-transform`	—	`translateX(-50%)`	—
`--nbhd-humongotron-scrollIndicator-zIndex`	—	`5`	—

Media overlay

Property	Token	Value	Description
`--nbhd-mediaOverlay-color`	`--nbhd-color-overlay`	`#000000`	—
`--nbhd-mediaOverlay-opacity`	`--nbhd-opacity-overlay-media`	`0.35`	—
`--nbhd-mediaOverlay-opacity-end`	—	`0.85`	—
`--nbhd-mediaOverlay-opacity-middle`	—	`0.5`	Strong enough that a title wrapping up into the middle of a featured card stays legible over light images.
`--nbhd-mediaOverlay-opacity-start`	—	`0`	—

Dependencies

Child components <nbhd-humongotron> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text> CTAReady <nbhd-cta> ImageReady <nbhd-image> VideoReady <nbhd-video> FlexReady <nbhd-flex> ContainerReady <nbhd-container>