Humongotron
ready

Main featurette component with attention grabbing features.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdHumongotron } from '@fbin-web/neighborhood-core';
<nbhd-humongotron background="secondary-light">
  <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"
    cta-class="cta-tracking-mtr-1">
    CTA 1
  </nbhd-cta>
  <nbhd-image slot="media" breakpoints="" responsive="" sm-width="375" sm-height="214" md-width="768" md-height="438"
    lg-width="750" lg-height="800" loading="lazy"
    src="https://moen.widen.net/content/dxp6rtujzc/original/SmartWaterApp_Jumbotron.jpg"
    alt="Fun ALT Slide 1 for images" img-class="media-css-class-sld-1" crop="" position="center">
  </nbhd-image>
</nbhd-humongotron>

React 

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=""
        aria-label="Learn more about CTA 1"
        cta-class="cta-tracking-mtr-1">
        CTA 1
      </NbhdCta>
      <NbhdImage
        slot="media"
        breakpoints=""
        responsive=""
        sm-width="375"
        sm-height="214"
        md-width="768"
        md-height="438"
        lg-width="750"
        lg-height="800"
        loading="lazy"
        src="https://moen.widen.net/content/dxp6rtujzc/original/SmartWaterApp_Jumbotron.jpg"
        alt="Fun ALT Slide 1 for images"
        img-class="media-css-class-sld-1"
        crop=""
        position="center"></NbhdImage>
    </NbhdHumongotron>
  </>
);

Properties

Property Attribute Type Default Description
data Deprecated object Content for data.
compact compact boolean false Set the component max-inline-size to --nbhd-maxInlineSize.
h1 h1 boolean false Enable the title element to render as <h1>
scrollArrow scroll-arrow boolean false Enable the scroll arrow animation icon. Does not display if carousel.
contain contain boolean false When enabled this will set the component max-inline-size to 2000px.
constrainLogo constrain-logo boolean false Enable will constrain the logo to a max-block-size instead of max-inline-size.
carousel carousel boolean false Enable carousel functionality for multiple humongotron items.
opacity opacity 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 35 Set the opacity percentage for overlay.
alignment alignment left | center | right left The text alignment for the content.
verticalPlacement vertical-placement top | middle | bottom middle The vertical placement for the content.
horizontalPlacement horizontal-placement left | center | right left The horizontal placement for the content.
background background none | primary-light | secondary-light | primary-dark | secondary-dark none Background theme color for main component.
marginTop margin-top none | small | medium | large none Adjust margin above the component.
none = 0
small = 24px
medium = 48px
large = 96px
marginBottom margin-bottom none | small | medium | large none Adjust margin below the component.
none = 0
small = 24px
medium = 48px
large = 96px
paddingTop padding-top default | none | small | medium | large 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 default | none | small | medium | large default Adjust padding to the bottom of the component.
default = component's bottom padding
none = 0
small = 24px
medium = 48px
large = 96px

Data Structure

This is deprecated; the preferred method is using slots.

Property Type Required Description
title string No Main headline content for the humongotron item.
eyebrow string No Short introductory content displayed above the title.
subtitle string No Secondary title content displayed below the main title.
content string No Main body content text for the humongotron item.
logo Logo No Logo object containing image source and alt text.
cta CTA No Call to Action object with label, href, and optional properties.
media Media Yes Media object containing image or video data for the humongotron background.
opacity 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 No Override the component opacity setting for this specific item.
constrainLogo boolean No Override the component constrainLogo setting to constrain logo to block-size instead of inline-size for this item.

Media Structure

Property Type Required Description
src string Yes URL to the image or video file. Supports Widen URLs and external media sources.
alt string Yes Alternative text for accessibility and SEO. Describes the media content for screen readers.
type 'image' | 'video' Yes Specifies whether the media is an image or video to determine rendering behavior.
class string No CSS class name to apply to the media element for custom styling.
crop 'none' | 'center' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left' No Crop position for images when using Widen API. Determines which part of the image to focus on when resized.

CTA Structure

Property Type Required Description
label string Yes The visible text displayed on the call-to-action button or link.
href string Yes The URL or path that the CTA links to. Can be internal or external URLs.
ariaLabel string No Custom ARIA label for accessibility. Provides additional context to screen readers when the visible label is insufficient.
external boolean No When true, the link will open in a new window/tab and include appropriate security attributes.
class string No CSS class name to apply to the CTA element for custom styling or tracking purposes.

Logo Structure

Structure for logo objects (extends Media with additional properties).

Property Type Required Description
src string Yes URL or path to the logo image.
alt string Yes Alternative text for the logo.
type image | video Yes Type of media content (typically 'image' for logos).
href string No URL to link to when logo is clicked.
external boolean No Whether the logo link opens in a new tab/window.
class string No Additional CSS class names.
crop none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left No Crop position for the logo image.

Slots

Name Description
logo Slot for custom logo content. Overrides the data.logo property when provided.
eyebrow Slot for custom eyebrow content displayed above the title. Overrides the data.eyebrow property when provided.
title Slot for custom title content. Overrides the data.title property when provided.
subtitle Slot for custom subtitle content displayed below the title. Overrides the data.subtitle property when provided.
content Slot for custom body content. Overrides the data.content property when provided.
cta Slot for custom call-to-action content. Overrides the data.cta property when provided.
media Slot for custom media content (images or videos). Overrides the data.media property when provided.

CSS Parts

Name Description
base The main wrapper element of the humongotron component.
container The main container element that wraps the flex layout.
flex The flex container that arranges visual and detail sections.
visual The visual container that holds media content.
detail The detail container that holds text content and CTA.
media The media slot container for images or videos.
logo The logo element container.
eyebrow The eyebrow text element displayed above the title.
title The main title element.
subtitle The subtitle element displayed below the title.
content The main body content text element.
cta The call-to-action element container.
image The image element (applied to child image component).
video The video element (applied to child video component).
scroll-arrow The scroll arrow element that appears when scrollArrow is enabled.

CSS Properties

Property Default Value
--nbhd-humongotron-marginInline var(--nbhd-space-0)
--nbhd-humongotron-maxInlineSize 100%
--nbhd-humongotron-minInlineSize var(--nbhd-minInlineSize)
--nbhd-humongotron-aspectRatio auto
--nbhd-humongotron-blockSize auto
--nbhd-humongotron-inlineSize auto
--nbhd-humongotron-minBlockSize auto
--nbhd-humongotron-position relative
--nbhd-humongotron-overlay-backgroundColor rgba(0, 0, 0, 0.35)
--nbhd-humongotron-overlay-backgroundColor-originColor var(--nbhd-color-black)
--nbhd-humongotron-overlay-backgroundColor-alpha 0.35
--nbhd-humongotron-overlay-text-color var(--nbhd-color-white)
--nbhd-humongotron-overlay-cta-color var(--nbhd-color-white)
--nbhd-humongotron-overlay-minBlockSize 800px
--nbhd-humongotron-detail-alignItems start
--nbhd-humongotron-detail-display flex
--nbhd-humongotron-detail-flexDirection column
--nbhd-humongotron-detail-justifyContent start
--nbhd-humongotron-detail-order 0
--nbhd-humongotron-detail-paddingBlock var(--nbhd-space-10)
--nbhd-humongotron-detail-paddingInline var(--nbhd-space-6)
--nbhd-humongotron-detail-position static
--nbhd-humongotron-detail-textAlign start
--nbhd-humongotron-detail-inlineSize 100%
--nbhd-humongotron-detail-zIndex auto
--nbhd-humongotron-visual-aspectRatio 375 / 214
--nbhd-humongotron-visual-inlineSize 100%
--nbhd-humongotron-visual-insetBlockStart auto
--nbhd-humongotron-visual-insetInlineStart auto
--nbhd-humongotron-visual-minBlockSize auto
--nbhd-humongotron-visual-position relative
--nbhd-humongotron-video-aspectRatio auto
--nbhd-humongotron-video-position absolute
--nbhd-humongotron-video-insetBlockStart 0
--nbhd-humongotron-video-insetInlineStart 0
--nbhd-humongotron-video-insetBlockEnd 0
--nbhd-humongotron-video-insetInlineEnd 0
--nbhd-humongotron-logo-inlineSize auto
--nbhd-humongotron-logo-maxInlineSize 115px
--nbhd-humongotron-logo-maxBlockSize none
--nbhd-humongotron-logo-marginBlockEnd var(--nbhd-space-5)

Dependencies

This component contains the following components as dependencies.