Hero Split
Component that contains either a video or image as a visual complement to the content.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Required
|
object
|
Content for component. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-maxInlineSize.
|
noShadow
|
no-shadow
|
boolean
|
false
|
Remove the shadow. |
reversed
|
reversed
|
boolean
|
false
|
Reverse the layout. |
border
|
border
|
boolean
|
false
|
Add border to component. |
topAligned
|
top-aligned
|
boolean
|
false
|
Set the alignment to top. |
h1
|
h1
|
boolean
|
false
|
Enable the title element to render as <h1>
|
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
|
borderRadiusTopLeft
|
border-radius-top-left
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the top left corner.
|
borderRadiusTopRight
|
border-radius-top-right
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the top right corner.
|
borderRadiusBottomLeft
|
border-radius-bottom-left
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the bottom left corner.
|
borderRadiusBottomRight
|
border-radius-bottom-right
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the bottom right corner.
|
Data Properties
Main data properties for Hero Split
| 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. |
note
|
string
|
Secondary content block. |
cta
|
object
|
Call to Action data object. |
media
Required
|
object
|
Media data object. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
base-container
|
The main container element. |
frame
|
The container that gets border styling. |
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 |
title
|
The title element. |
eyebrow
|
The eyebrow element. |
subtitle
|
The subtitle element. |
content
|
The content element. |
cta
|
The cta element. |
note
|
The note element. |
Hero Split Styling Properties
Available styling CSS Properties for the Hero Split component.
| Property | Default Value |
|---|---|
--neighborhood-heroSplit-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-heroSplit-maxInlineSize
|
100% |
--neighborhood-heroSplit-paddingBlock
|
var(--neighborhood-space-10) |
--neighborhood-heroSplit-frame-border
|
2px solid |
--neighborhood-heroSplit-frame-borderColor
|
var(--neighborhood-theme-accent) |
--neighborhood-heroSplit-frame-borderRadius
|
var(--neighborhood-borderRadius-sm) |
--neighborhood-heroSplit-frame-paddingBlock
|
var(--neighborhood-space-6) |
--neighborhood-heroSplit-frame-paddingInline
|
var(--neighborhood-space-6) |
--neighborhood-heroSplit-flex-alignItems
|
center |
--neighborhood-heroSplit-flex-justifyContent
|
space-between |
--neighborhood-heroSplit-detail-gutter-padding
|
var(--neighborhood-space-11) |
--neighborhood-heroSplit-detail-gutter-margin
|
var(--neighborhood-space-0) |
--neighborhood-heroSplit-detail-marginInline
|
var(--neighborhood-space-0) var(--neighborhood-heroSplit-detail-gutter-margin) |
--neighborhood-heroSplit-detail-paddingBlock
|
var(--neighborhood-space-0) var(--neighborhood-heroSplit-detail-gutter-padding) |
--neighborhood-heroSplit-detail-inlineSize
|
100% |
--neighborhood-heroSplit-visual-borderStartStartRadius
|
var(--neighborhood-borderRadius-0) |
--neighborhood-heroSplit-visual-borderStartEndRadius
|
var(--neighborhood-borderRadius-0) |
--neighborhood-heroSplit-visual-borderEndStartRadius
|
var(--neighborhood-borderRadius-0) |
--neighborhood-heroSplit-visual-borderEndEndRadius
|
var(--neighborhood-borderRadius-0) |
--neighborhood-heroSplit-visual-boxShadow
|
var(--neighborhood-shadow-lg) |
--neighborhood-heroSplit-visual-maxInlineSize
|
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 |
Note Styling Properties
Available styling CSS Properties for the Note element.
| Property | Default Value |
|---|---|
--neighborhood-note-borderInlineStart
|
2px solid |
--neighborhood-note-borderInlineColor
|
currentColor |
--neighborhood-note-color
|
inherit |
--neighborhood-note-fontFamily
|
inherit |
--neighborhood-note-fontSize
|
var(--neighborhood-fontSize-xs) |
--neighborhood-note-fontStyle
|
normal |
--neighborhood-note-fontWeight
|
var(--neighborhood-fontWeight-500) |
--neighborhood-note-lineHeight
|
normal |
--neighborhood-note-marginBlock
|
var(--neighborhood-space-12) var(--neighborhood-space-0) |
--neighborhood-note-paddingInline
|
var(--neighborhood-space-4) var(--neighborhood-space-0) |
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)) |