Humongotron
draft

Main featurette component with attention grabbing features.

Styled Version

Code

HTML

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

<nbhd-humongotron theme="secondary-light">
  <nbhd-text
    slot="eyebrow"
    tag="div"
    variant="eyebrow"
    theme="light">
    Elit Sem
  </nbhd-text>
  <nbhd-text
    variant="title"
    slot="title"
    tag="h2"
    theme="light">
    Humongotron Title
  </nbhd-text>
  <nbhd-text
    slot="subtitle"
    variant="subtitle"
    tag="h3"
    theme="light">
    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"
    theme="light"
    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-theme="secondary-light">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow"
        theme="light">
        Elit Sem
      </NbhdText>
      <NbhdText
        variant="title"
        slot="title"
        tag="h2"
        theme="light">
        Humongotron Title
      </NbhdText>
      <NbhdText
        slot="subtitle"
        variant="subtitle"
        tag="h3"
        theme="light">
        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"
        theme="light"
        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`		`object`		Content for data.
`prefab`	`prefab`	`boolean`	`false`	When enabled the component will use the `data` property for content and not the slots.
`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`.
`opacity`	`opacity`	`number`	`35`	Set the opacity 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.
`theme`	`theme`	`primary-light \| secondary-light \| primary-dark \| secondary-dark`	`primary-light`	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 Properties

Data object property is only when the prefab property is enabled.

Property	Type	Description
`title`	`string`	Main headline content
`eyebrow`	`string`	Short introductory content above the title.
`subtitle`	`string`	Content for secondary title that is under title.
`content`	`string`	General content block.
`logo`	`object`	Logo media data object.
`cta`	`object`	Call to Action data object.
`media` Required	`object`	Media data object.

Slots

Slots are not available when the prefab property is enabled.

Name	Description

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-minBlockSize`	auto
`--nbhd-humongotron-position`	relative
`--nbhd-humongotron-inlineSize`	auto
`--nbhd-humongotron-logo-maxInlineSize`	115px
`--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`	40px
`--nbhd-humongotron-detail-paddingInline`	24px
`--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-insetBlockStart`	auto
`--nbhd-humongotron-visual-insetInlineStart`	auto
`--nbhd-humongotron-visual-minBlockSize`	auto
`--nbhd-humongotron-visual-position`	relative
`--nbhd-humongotron-visual-inlineSize`	100%

Dependencies

This component contains the following components as dependencies.

Humongotron draft