Humongotron
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.
|
h1
|
h1
|
boolean
|
false
|
Enable the title element to render as <h1>
|
scrollArrow
|
scroll-arrow
|
boolean
|
false
|
Enable the scroll arrow animation icon. Does not display if carousel. |
contain
|
contain
|
boolean
|
false
|
When enabled this will set the component max-inline-size to 2000px.
|
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. |
horizontalPlacement
|
horizontal-placement
|
left | center | right
|
left
|
The horizontal 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. |
overlayOpacity
|
number
|
Set the overlay opacity. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
humongotron-item
|
The humongotron 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. |
scroll-arrow
|
Scroll arrow 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. |
Humongotron Styling Properties
Available styling CSS Properties for the Humongotron component.
| Property | Default Value |
|---|---|
--neighborhood-humongotron-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-humongotron-maxInlineSize
|
100% |
--neighborhood-humongotron-minInlineSize
|
var(--neighborhood-minInlineSize) |
Humongotron Item Styling Properties
Available styling CSS Properties for the Humongotron Item element.
| Property | Default Value |
|---|---|
--neighborhood-humongotron-item-aspectRatio
|
auto |
--neighborhood-humongotron-item-blockSize
|
auto |
--neighborhood-humongotron-item-minBlockSize
|
auto |
--neighborhood-humongotron-item-position
|
relative |
--neighborhood-humongotron-item-inlineSize
|
auto |
--neighborhood-humongotron-item-logo-maxInlineSize
|
115px |
--neighborhood-humongotron-detail-alignItems
|
start |
--neighborhood-humongotron-detail-display
|
flex |
--neighborhood-humongotron-detail-flexDirection
|
column |
--neighborhood-humongotron-detail-justifyContent
|
start |
--neighborhood-humongotron-detail-order
|
0 |
--neighborhood-humongotron-detail-paddingBlock
|
40px |
--neighborhood-humongotron-detail-paddingInline
|
24px |
--neighborhood-humongotron-detail-position
|
static |
--neighborhood-humongotron-detail-textAlign
|
start |
--neighborhood-humongotron-detail-inlineSize
|
100% |
--neighborhood-humongotron-detail-zIndex
|
auto |
--neighborhood-humongotron-visual-aspectRatio
|
375 / 214 |
--neighborhood-humongotron-visual-insetBlockStart
|
auto |
--neighborhood-humongotron-visual-insetInlineStart
|
auto |
--neighborhood-humongotron-visual-minBlockSize
|
auto |
--neighborhood-humongotron-visual-position
|
relative |
--neighborhood-humongotron-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 |