Jumbotron
Main featurette component with attention grabbing features. Can be presented as a single item or in a carousel.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
Required
|
array
|
Content for items. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-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. |
Item Properties
Item properties for Humongotron
| 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. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
jumbotron-item
|
The Jumbotron item element. |
container
|
The main container element. |
flex
|
The flex container that wraps visual and detail. |
visual
|
The visual container. |
image
|
the image element. |
video
|
The video element. |
detail
|
The detail container |
logo
|
The logo element. |
title
|
The title element. |
eyebrow
|
The eyebrow element. |
subtitle
|
The subtitle element. |
content
|
The content element. |
cta
|
The cta element. |
carousel
|
The carousel element. |
carousel-container
|
The container within the carousel. |
carousel-item
|
The carousel item element. |
carousel-nav
|
The carousel navigation container. |
carousel-nav-previous
|
the carousel navigation previous element. |
carousel-nav-next
|
The cta element. |
carousel-nav-icon
|
The carousel navigation icon element. |
carousel-pagination
|
The carousel pagination container. |
Jumbotron Styling Properties
Available styling CSS Properties for the Jumbotron component.
| Property | Default Value |
|---|---|
--neighborhood-jumbotron-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-jumbotron-maxInlineSize
|
100% |
--neighborhood-jumbotron-minInlineSize
|
var(--neighborhood-minInlineSize) |
Jumbotron Item Styling Properties
Available styling CSS Properties for the Jumbotron Item element.
| Property | Default Value |
|---|---|
--neighborhood-jumbotron-item-aspectRatio
|
auto |
--neighborhood-jumbotron-item-blockSize
|
auto |
--neighborhood-jumbotron-item-minBlockSize
|
auto |
--neighborhood-jumbotron-item-position
|
relative |
--neighborhood-jumbotron-item-inlineSize
|
auto |
--neighborhood-jumbotron-detail-alignItems
|
start |
--neighborhood-jumbotron-detail-display
|
flex |
--neighborhood-jumbotron-detail-flexDirection
|
column |
--neighborhood-jumbotron-detail-justifyContent
|
start |
--neighborhood-jumbotron-detail-order
|
0 |
--neighborhood-jumbotron-detail-paddingBlock
|
40px |
--neighborhood-jumbotron-detail-paddingInline
|
24px |
--neighborhood-jumbotron-detail-position
|
static |
--neighborhood-jumbotron-detail-textAlign
|
start |
--neighborhood-jumbotron-detail-inlineSize
|
100% |
--neighborhood-jumbotron-detail-zIndex
|
auto |
--neighborhood-jumbotron-visual-aspectRatio
|
375 / 214 |
--neighborhood-jumbotron-visual-insetBlockStart
|
auto |
--neighborhood-jumbotron-visual-insetInlineStart
|
auto |
--neighborhood-jumbotron-visual-minBlockSize
|
auto |
--neighborhood-jumbotron-visual-position
|
relative |
--neighborhood-jumbotron-visual-inlineSize
|
100% |
Eyebrow Styling Properties
Available styling CSS Properties for the Eyebrow element.
| Property | Default Value |
|---|---|
--neighborhood-eyebrow-color
|
var(--neighborhood-eyebrow-color-lightTheme) |
--neighborhood-eyebrow-fontFamily
|
inherit |
--neighborhood-eyebrow-fontSize
|
var(--neighborhood-fontSize-xs) |
--neighborhood-eyebrow-fontStyle
|
normal |
--neighborhood-eyebrow-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-eyebrow-letterSpacing
|
normal |
--neighborhood-eyebrow-lineHeight
|
var(--neighborhood-line-height-1-4) |
--neighborhood-eyebrow-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-2) |
--neighborhood-eyebrow-textTransform
|
none |
Title Styling Properties
Available styling CSS Properties for the Title element.
| Property | Default Value |
|---|---|
--neighborhood-title-color
|
var(--neighborhood-title-color-lightTheme) |
--neighborhood-title-fontFamily
|
inherit |
--neighborhood-title-fontSize
|
var(--neighborhood-fontSize-xl) |
--neighborhood-title-fontStyle
|
normal |
--neighborhood-title-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-title-letterSpacing
|
normal |
--neighborhood-title-lineHeight
|
var(--neighborhood-lineHeight-sm) |
--neighborhood-title-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-title-textTransform
|
none |
Subtitle Styling Properties
Available styling CSS Properties for the Subtitle element.
| Property | Default Value |
|---|---|
--neighborhood-subtitle-color
|
var(--neighborhood-subtitle-color-lightTheme) |
--neighborhood-subtitle-fontFamily
|
inherit |
--neighborhood-subtitle-fontSize
|
var(--neighborhood-fontSize-md) |
--neighborhood-subtitle-fontStyle
|
normal |
--neighborhood-subtitle-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-subtitle-lineHeight
|
normal |
--neighborhood-subtitle-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-subtitle-textTransform
|
none |
Content Styling Properties
Available styling CSS Properties for the Content element.
| Property | Default Value |
|---|---|
--neighborhood-content-color
|
inherit |
--neighborhood-content-fontFamily
|
inherit |
--neighborhood-content-fontSize
|
var(--neighborhood-fontSize-regular) |
--neighborhood-content-fontWeight
|
inherit |
--neighborhood-content-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-7) |
--neighborhood-content-textTransform
|
inherit |
CTA Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-cta-backgroundColor
|
transparent |
--neighborhood-cta-backgroundImage
|
none |
--neighborhood-cta-backgroundPosition
|
0 0 |
--neighborhood-cta-backgroundSize
|
100% |
--neighborhood-cta-borderColor
|
transparent |
--neighborhood-cta-borderRadius
|
2px |
--neighborhood-cta-borderStyle
|
solid |
--neighborhood-cta-borderWidth
|
2px |
--neighborhood-cta-color-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-color-hover-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-hover-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-cursor
|
pointer |
--neighborhood-cta-display
|
inline-block |
--neighborhood-cta-fontFamily
|
var(--neighborhood-link-fontStack) |
--neighborhood-cta-fontSize
|
var(--neighborhood-fontSize-xxs) |
--neighborhood-cta-fontStyle
|
normal |
--neighborhood-cta-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-cta-letterSpacing
|
var(--neighborhood-letterSpacing-2) |
--neighborhood-cta-paddingBlock
|
var(--neighborhood-space-3) |
--neighborhood-cta-paddingInline
|
var(--neighborhood-space-9) |
--neighborhood-cta-position
|
relative |
--neighborhood-cta-textAlign
|
center |
--neighborhood-cta-textDecoration
|
none |
--neighborhood-cta-textDecorationThickness
|
auto |
--neighborhood-cta-textDecorationThickness-hover
|
auto |
--neighborhood-cta-textDecorationColor
|
inherit |
--neighborhood-cta-textTransform
|
uppercase |
--neighborhood-cta-textUnderlineOffset
|
auto |
--neighborhood-cta-transitionFunction
|
ease-in-out |
--neighborhood-cta-transitionDuration
|
0.2s |
--neighborhood-cta-transitionProperty
|
background-color, color, text-decoration |
CTA Primary Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-ctaPrimary-backgroundColor-lightTheme
|
var(--neighborhood-color-black)) |
--neighborhood-ctaPrimary-backgroundColor-hover-lightTheme
|
rgba(var(--neighborhood-color-black-rgb), var(--neighborhood-cta-hover-opacity)) |
--neighborhood-ctaPrimary-borderColor-lightTheme
|
var(--neighborhood-fbin-color-black) |
--neighborhood-ctaPrimary-color-lightTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-color-hover-lightTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-backgroundColor-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-backgroundColor-hover-darkTheme
|
rgba(var(--neighborhood-color-black-rgb), var(--neighborhood-cta-hover-opacity)) |
--neighborhood-ctaPrimary-borderColor-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-color-darkTheme
|
var(--neighborhood-color-black)) |
--neighborhood-ctaPrimary-color-hover-darkTheme
|
var(--neighborhood-color-black)) |