Jumbotron | Components | Neighborhood Design System

Example

Selected Brand

Loading

Code

HTML

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

<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"
    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-jumbotron>

React

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

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
`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`	`start \| center \| end`	`start`	The text alignment for the content.
`verticalPlacement`	`vertical-placement`	`top \| center \| bottom`	`center`	The vertical placement for the content.
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Background theme for the component.
`contentSurface`	`content-surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Content theme for the component.
`marginTop`	`margin-top`	`none \| small \| medium \| large`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`none \| small \| medium \| large`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`default \| none \| small \| medium \| large`	`default`	Adjust padding to the top of the component.
`paddingBottom`	`padding-bottom`	`default \| none \| small \| medium \| large`	`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.

Dependencies

This component contains the following components as dependencies.

Jumbotron ready