Jumbotron

Ready

Main featurette component with attention grabbing features

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-jumbotron surface="secondary">
  <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"
    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-jumbotron>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const App = () => (
  <>
    <NbhdJumbotron surface="secondary">
      <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"
        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>
    </NbhdJumbotron>
  </>
);

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", media images are resized and cropped to these dimensions using image-focus as the crop point. The logo is resized to fit and is never cropped.

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
`Logo (all breakpoints)`	190px x 75px	Fit within, not cropped

Properties

Property	Attribute	Type	Default	Description
`reverse`	`reverse`	`boolean`	`false`	Whether the jumbotron layout should be reversed.
`compact`	`compact`	`boolean`	`false`	Set the component `max-inline-size` to `--nbhd-size-container-max`.
`alignment`	`alignment`	`startcenterend`	`start`	The text alignment for the content.
`verticalPlacement`	`vertical-placement`	`topcenterbottom`	`center`	The vertical placement for the content.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Background theme for the component.
`contentSurface`	`content-surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Content theme for the component.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the top of the component.
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the bottom of the component.

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
`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-slot`	The media slot.
`flex`	The `<nbhd-flex>` container.
`detail`	The detail container that holds text content and logo.
`media`	The media container.
`base`	The main `<section>` wrapper element.
`container`	The main `<nbhd-container>` element.

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

CSS Properties

Set these on nbhd-jumbotron 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.

Property	Token	Value
`--nbhd-jumbotron-aspectRatio`	—	`auto`
`--nbhd-jumbotron-blockSize`	—	`auto`
`--nbhd-jumbotron-detail-alignItems`	—	`start`
`--nbhd-jumbotron-detail-bpLg-inlineSize`	—	`45%`
`--nbhd-jumbotron-detail-bpMd-paddingInline`	`--nbhd-space-12`	`48px`
`--nbhd-jumbotron-detail-display`	—	`flex`
`--nbhd-jumbotron-detail-flexDirection`	—	`column`
`--nbhd-jumbotron-detail-inlineSize`	—	`100%`
`--nbhd-jumbotron-detail-justifyContent`	—	`center`
`--nbhd-jumbotron-detail-paddingBlock`	`--nbhd-space-10`	`40px`
`--nbhd-jumbotron-detail-paddingInline`	`--nbhd-space-6`	`24px`
`--nbhd-jumbotron-detail-position`	—	`static`
`--nbhd-jumbotron-detail-textAlign`	—	`start`
`--nbhd-jumbotron-detail-zIndex`	`--nbhd-z-auto`	`auto`
`--nbhd-jumbotron-flex-bpLg-blockSize`	—	`100%`
`--nbhd-jumbotron-flex-bpLg-minBlockSize`	`--nbhd-size-hero-minBlockSize`	`800px`
`--nbhd-jumbotron-host-display`	—	`block`
`--nbhd-jumbotron-host-inlineSize`	—	`100%`
`--nbhd-jumbotron-inlineSize`	—	`100%`
`--nbhd-jumbotron-logo-display`	—	`block`
`--nbhd-jumbotron-logo-marginBlockEnd`	`--nbhd-space-5`	`20px`
`--nbhd-jumbotron-logo-maxBlockSize`	`--nbhd-size-hero-logo-maxBlockSize`	`120px`
`--nbhd-jumbotron-logo-maxInlineSize`	`--nbhd-size-hero-logo-maxInlineSize`	`190px`
`--nbhd-jumbotron-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-jumbotron-maxInlineSize`	—	`100%`
`--nbhd-jumbotron-media-aspectRatio`	—	`375 / 214`
`--nbhd-jumbotron-media-asset-blockSize`	—	`100%`
`--nbhd-jumbotron-media-asset-insetBlockStart`	—	`0`
`--nbhd-jumbotron-media-asset-insetInlineStart`	—	`0`
`--nbhd-jumbotron-media-asset-objectFit`	—	`cover`
`--nbhd-jumbotron-media-asset-position`	—	`absolute`
`--nbhd-jumbotron-media-asset-transitionDuration`	—	`0.5s`
`--nbhd-jumbotron-media-asset-transitionProperty`	—	`transform`
`--nbhd-jumbotron-media-bpLg-aspectRatio`	—	`auto`
`--nbhd-jumbotron-media-bpLg-inlineSize`	—	`55%`
`--nbhd-jumbotron-media-inlineSize`	—	`100%`
`--nbhd-jumbotron-media-minBlockSize`	—	`auto`
`--nbhd-jumbotron-media-position`	—	`relative`
`--nbhd-jumbotron-minBlockSize`	—	`auto`
`--nbhd-jumbotron-minInlineSize`	`--nbhd-size-container-min`	`320px`
`--nbhd-jumbotron-position`	—	`relative`
`--nbhd-jumbotron-title-bpLg-fontSize`	`--nbhd-typography-display-fontSize`	`3rem`

Dependencies

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

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