Jumbotron | Components | Neighborhood Design System

Selected Brand

Loading

Code

HTML

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

<nbhd-jumbotron background="secondary-light">
  <nbhd-text slot="eyebrow" tag="div" variant="eyebrow">
    Elit Sem
  </nbhd-text>
  <nbhd-text variant="title" slot="title" tag="h2">
    Jumbotron 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">
    <span slot="before">B</span>
    CTA 1
    <span slot="after">A</span>
  </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-jumbotron>

React

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

const App = () => (
  <>
    <NbhdJumbotron background="secondary-light">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow">
        Elit Sem
      </NbhdText>
      <NbhdText
        variant="title"
        slot="title"
        tag="h2">
        Jumbotron 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">
        <span slot="before">B</span>
        CTA 1<span slot="after">A</span>
      </NbhdCta>
      <NbhdImage
        slot="media"
        breakpoints=""
        responsive=""
        smWidth="375"
        smHeight="214"
        mdWidth="768"
        mdHeight="438"
        lgWidth="750"
        lgHeight="800"
        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=""
        position="center"></NbhdImage>
    </NbhdJumbotron>
  </>
);

Media Dimensions

Recommended image dimensions for optimal display across different breakpoints. Images are automatically cropped and optimized when using Widen API.

Breakpoint	Dimension	Aspect Ratio
Small (≤767px)	375px x 214px	1.75:1
Medium (≥768px)	768px x 438px	1.75:1
Large (≥1024px)	750px x 800px	0.94:1

Properties

Property	Attribute	Type	Default	Description
`data` Deprecated		`JumbotronData`		Content for component.
`compact`	`compact`	`boolean`	`false`	Set the component `max-inline-size` to `--nbhd-maxInlineSize`.
`reversed`	`reversed`	`boolean`	`false`	Reverse the layout.
`h1`	`h1`	`boolean`	`false`	Enable the `title` element to render as `<h1>`
`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.
`background`	`background`	`none \| primary-light \| secondary-light \| primary-dark \| secondary-dark`	`none`	Background 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
`contentBackground`	`content-background`	`primary-light \| secondary-light \| primary-dark \| secondary-dark`	`primary-light`	Background color for the content area.
`carousel`	`carousel`	`boolean`	`false`	Enable carousel layout mode.
`constrainLogo`	`constrain-logo`	`boolean`	`false`	Constrain the logo to a max-block-size instead of max-inline-size.

Data Structure

This is deprecated; the preferred method is using slots.

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`	`Logo`	Logo media data object. See Logo Structure below.
`cta`	`CTA`	Call to Action data object. See CTA Structure below.
`media`	`Media`	Media data object. See Media Structure below.

Media Structure

Property	Type	Required	Description
`src`	`string`	Yes	Media source URL or path
`alt`	`string`	Yes	Alternative text for accessibility
`class`	`string`	No	Additional CSS class for styling
`type`	`image \| video`	Yes	Type of media content
`crop`	`none \| center \| top \| top-right \| right \| bottom-right \| bottom \| bottom-left \| left \| top-left`	No	Crop position when using Widen API

CTA Structure

Property	Type	Required	Description
`label`	`string`	Yes	Button or link text
`href`	`string`	Yes	URL or path for the link destination
`ariaLabel`	`string`	No	Accessible label for screen readers
`external`	`boolean`	No	Whether the link opens in a new tab/window
`class`	`string`	No	Additional CSS class for styling

Logo Structure

Logo extends Media structure with additional properties.

Property	Type	Required	Description
`src`	`string`	Yes	Logo image source URL or path
`alt`	`string`	Yes	Alternative text for accessibility
`class`	`string`	No	Additional CSS class for styling
`type`	`image \| video`	Yes	Type of media content
`crop`	`none \| center \| top \| top-right \| right \| bottom-right \| bottom \| bottom-left \| left \| top-left`	No	Crop position when using Widen API
`href`	`string`	No	URL or path when logo is clickable
`external`	`boolean`	No	Whether the logo link opens in a new tab/window

Slots

Name	Description
`logo`	Logo content area. Displays above other content when present.
`eyebrow`	Short introductory text displayed above the title.
`title`	Main headline content area.
`subtitle`	Secondary title displayed below the main title.
`content`	General content block for descriptive text.
`cta`	Call-to-action button or link content.
`media`	Media content area for images or videos.

CSS Parts

CSS parts that can be styled using the ::part() selector.

Name	Description
`base`	The main `<section>` wrapper element.
`container`	The main `<nbhd-container>` element.
`flex`	The `<nbhd-flex>` container that wraps visual and detail areas.
`detail`	The detail container that holds text content and logo.
`visual`	The visual container that holds media content.
`logo`	The logo element when present.
`eyebrow`	The eyebrow text element.
`title`	The main title element.
`subtitle`	The subtitle element.
`content`	The content text element.
`cta`	The call-to-action element.
`media`	The media slot container.
`image`	The `<img>` element when media type is image.
`video`	The `<video>` element when media type is video.

CSS Properties

Property	Default Value
`--nbhd-jumbotron-aspectRatio`	auto
`--nbhd-jumbotron-blockSize`	auto
`--nbhd-jumbotron-inlineSize`	100%
`--nbhd-jumbotron-marginInline`	var(--nbhd-space-0, 0)
`--nbhd-jumbotron-maxInlineSize`	100%
`--nbhd-jumbotron-minBlockSize`	auto
`--nbhd-jumbotron-minInlineSize`	var(--nbhd-minInlineSize, 320px)
`--nbhd-jumbotron-position`	relative
`--nbhd-jumbotron-detail-alignItems`	start
`--nbhd-jumbotron-detail-display`	flex
`--nbhd-jumbotron-detail-flexDirection`	column
`--nbhd-jumbotron-detail-inlineSize`	100%
`--nbhd-jumbotron-detail-justifyContent`	start
`--nbhd-jumbotron-detail-order`	0
`--nbhd-jumbotron-detail-paddingBlock`	40px
`--nbhd-jumbotron-detail-paddingInline`	24px
`--nbhd-jumbotron-detail-position`	static
`--nbhd-jumbotron-detail-textAlign`	start
`--nbhd-jumbotron-detail-zIndex`	auto
`--nbhd-jumbotron-logo-inlineSize`	auto
`--nbhd-jumbotron-logo-maxInlineSize`	115px
`--nbhd-jumbotron-logo-maxBlockSize`	none
`--nbhd-jumbotron-logo-marginBlockEnd`	var(--nbhd-space-5)
`--nbhd-jumbotron-video-aspectRatio`	auto
`--nbhd-jumbotron-video-position`	absolute
`--nbhd-jumbotron-video-insetBlockStart`	0
`--nbhd-jumbotron-video-insetInlineStart`	0
`--nbhd-jumbotron-video-insetBlockEnd`	0
`--nbhd-jumbotron-video-insetInlineEnd`	0
`--nbhd-jumbotron-visual-aspectRatio`	375 / 214
`--nbhd-jumbotron-visual-inlineSize`	100%
`--nbhd-jumbotron-visual-insetBlockStart`	auto
`--nbhd-jumbotron-visual-insetInlineStart`	auto
`--nbhd-jumbotron-visual-minBlockSize`	auto
`--nbhd-jumbotron-visual-position`	relative

Dependencies

This component contains the following components as dependencies.

Jumbotron ready