Humongotron
ready

Main featurette component with attention grabbing features.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdHumongotron } from '@fbin-web/neighborhood-core';
<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"
    cta-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" img-class="media-css-class-sld-1" crop image-focus="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
        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>
  </>
);

Properties

Property Attribute Type Default Description
layout layout full | contained | compact 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, clamped to the allowed range.
alignment alignment start | center | end start Horizontal content alignment within the content area.
verticalPlacement vertical-placement top | center | bottom center Vertical placement of the content block within the component.
horizontalPlacement horizontal-placement start | center | end start Horizontal placement of the content block within the media area.
surface surface none | primary | secondary | inverse | inverse-secondary primary Sets the component surface theme. When a logo is present, the effective surface is adjusted automatically for contrast.
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

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

Dependencies

This component contains the following components as dependencies.