Jumbotron
ready

Main featurette component with attention grabbing features

Styled Version

Code

HTML

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

<nbhd-jumbotron background-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">
    Jumbotron 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">
    <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 backgroundTheme="secondary-light">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow"
        theme="light">
        Elit Sem
      </NbhdText>
      <NbhdText
        variant="title"
        slot="title"
        tag="h2"
        theme="light">
        Jumbotron 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=""
        ariaLabel="Learn more about CTA 1"
        theme="light"
        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>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`data`		`object`		Content for component when `prefab` is enabled.
`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`.
`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.
`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
`itemTheme`	`item-theme`	`primary-light \| secondary-light \| primary-dark \| secondary-dark`	`primary-light`	Background theme color for item.
`carousel`	`carousel`	`object`		Carousel config object.

Data Properties

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

Property	Type	Description
`title` Required	`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.
`constrainLogoHeight`	`boolean`	Enable will constrain the logo to a `max-block-size` instead of `max-inline-size`.
`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-jumbotron-marginInline`	var(--nbhd-space-0)
`--nbhd-jumbotron-maxInlineSize`	100%
`--nbhd-jumbotron-minInlineSize`	var(--nbhd-minInlineSize)
`--nbhd-jumbotron-aspectRatio`	auto
`--nbhd-jumbotron-blockSize`	auto
`--nbhd-jumbotron-minBlockSize`	auto
`--nbhd-jumbotron-position`	relative
`--nbhd-jumbotron-inlineSize`	auto
`--nbhd-jumbotron-detail-alignItems`	start
`--nbhd-jumbotron-detail-display`	flex
`--nbhd-jumbotron-detail-flexDirection`	column
`--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-inlineSize`	100%
`--nbhd-jumbotron-detail-zIndex`	auto
`--nbhd-jumbotron-visual-aspectRatio`	375 / 214
`--nbhd-jumbotron-visual-insetBlockStart`	auto
`--nbhd-jumbotron-visual-insetInlineStart`	auto
`--nbhd-jumbotron-visual-minBlockSize`	auto
`--nbhd-jumbotron-visual-position`	relative
`--nbhd-jumbotron-visual-inlineSize`	100%

Dependencies

This component contains the following components as dependencies.

Jumbotron ready