Hero Split
ready
Component that contains either a video or image as a visual complement to the content.
Loading
Code
HTML
import { NbhdHeroSplit } from '@fbin-web/neighborhood-core';<nbhd-hero-split>
<nbhd-text slot="eyebrow" tag="div" variant="eyebrow">Fringilla Mollis Parturient</nbhd-text>
<nbhd-text slot="title" variant="title" tag="h2">Cursus Condimentum Bibendum</nbhd-text>
<nbhd-text slot="subtitle" tag="h3" variant="subtitle">Vulputate Vestibulum</nbhd-text>
<nbhd-text slot="content" tag="div">Curabitur blandit tempus porttitor.</nbhd-text>
<nbhd-cta variant="primary" slot="cta" href="go-to-this-page" css-class="fun-css-tracking-class" external=""
aria-label="Learn more about this thingy">
Learn More
</nbhd-cta>
<nbhd-text slot="note" tag="div">This is a note - Nulla vitae elit libero, a pharetra augue.</nbhd-text>
<nbhd-image slot="media"
src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
alt="Fun ALT test for images">
</nbhd-image>
</nbhd-hero-split>React
import { NbhdHeroSplit, NbhdCta, NbhdText, NbhdImage } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdHeroSplit>
<NbhdText
slot="eyebrow"
tag="div"
variant="eyebrow">
Fringilla Mollis Parturient
</NbhdText>
<NbhdText
slot="title"
variant="title"
tag="h2">
Cursus Condimentum Bibendum
</NbhdText>
<NbhdText
slot="subtitle"
tag="h3"
variant="subtitle">
Vulputate Vestibulum
</NbhdText>
<NbhdText
slot="content"
tag="div">
Curabitur blandit tempus porttitor.
</NbhdText>
<NbhdCta
variant="primary"
slot="cta"
href="go-to-this-page"
css-class="fun-css-tracking-class"
external=""
aria-label="Learn more about this thingy">
Learn More
</NbhdCta>
<NbhdText
slot="note"
tag="div">
This is a note - Nulla vitae elit libero, a pharetra augue.
</NbhdText>
<NbhdImage
slot="media"
src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
alt="Fun ALT test for images"></NbhdImage>
</NbhdHeroSplit>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Deprecated
|
HeroSplitData
|
Content data object for the component. See Data Properties section for details. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-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>
|
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
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
|
mediaRadiusTopLeft
|
media-radius-top-left
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the top left corner.
|
mediaRadiusTopRight
|
media-radius-top-right
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the top right corner.
|
mediaRadiusBottomLeft
|
media-radius-bottom-left
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the bottom left corner.
|
mediaRadiusBottomRight
|
media-radius-bottom-right
|
none | small | medium | large | full
|
none
|
Adjust the border radius of the media element for the bottom right corner.
|
Data Structure Properties
The HeroSplitData interface defines the structure for content data used with the hero split component. This is deprecated; the preferred method is using slots.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | Main headline content |
eyebrow
|
string
|
No | Short introductory content above the title. |
subtitle
|
string
|
No | Content for secondary title that is under title. |
content
|
string
|
No | General content block. |
note
|
string
|
No | Secondary content block. |
cta
|
CTA
|
No | Call to Action data object. See CTA interface for structure details. |
media
|
Media
|
Yes | Media data object containing image or video information. See Media interface for structure details. |
CTA Structure
The CTA (Call to Action) interface defines the structure for interactive elements that guide users to take specific actions.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Display text for the call to action button or link. |
href
|
string
|
Yes | URL or path that the CTA should navigate to when activated. |
ariaLabel
|
string
|
No | Accessible label for screen readers, providing additional context when the visible label is insufficient. |
external
|
boolean
|
No | Indicates whether the link opens in a new window/tab (true) or navigates within the current context (false). |
class
|
string
|
No | CSS class for custom styling of the CTA element. |
Media Structure
The Media interface defines the structure for media content (images and videos) used throughout the component.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | Source URL for the image or video file. |
alt
|
string
|
Yes | Alternative text for accessibility and when media fails to load. |
type
|
'image' | 'video'
|
Yes | Specifies whether the media is an image or video. |
class
|
string
|
No | CSS class for custom styling of the media element. |
crop
|
CropPosition
|
No | Image crop position using Widen API values: 'none' | 'center' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'. |
Slots
| Name | Description |
|---|---|
eyebrow
|
Eyebrow placement. |
title
|
Title placement. |
subtitle
|
Subtitle placement. |
content
|
Content placement. |
cta
|
Call to Action (CTA) placement. |
note
|
Note placement. |
media
|
Media placement. |
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. |
CSS Properties
CSS custom properties (variables) available for styling the hero-split component. These properties allow fine-grained control over the component's appearance and layout.
| Property | Default Value | Description |
|---|---|---|
--nbhd-heroSplit-marginInline
|
var(--nbhd-space-0) | Inline margin for the main hero-split container. |
--nbhd-heroSplit-maxInlineSize
|
100% | Maximum inline size (width) of the hero-split container. |
--nbhd-heroSplit-paddingBlock
|
var(--nbhd-space-10) | Block padding (top and bottom) for the hero-split container. |
--nbhd-heroSplit-frame-border
|
2px solid | Border style for the frame container when border prop is enabled. |
--nbhd-heroSplit-frame-borderColor
|
var(--nbhd-theme-accent) | Border color for the frame container. |
--nbhd-heroSplit-frame-borderRadius
|
var(--nbhd-borderRadius-sm) | Border radius for the frame container. |
--nbhd-heroSplit-frame-paddingBlock
|
var(--nbhd-space-6) | Block padding (top and bottom) for the frame container. |
--nbhd-heroSplit-frame-paddingInline
|
var(--nbhd-space-6) | Inline padding (left and right) for the frame container. |
--nbhd-heroSplit-flex-alignItems
|
center | Flex alignment for items within the flex container. |
--nbhd-heroSplit-flex-justifyContent
|
space-between | Flex justification for content within the flex container. |
--nbhd-heroSplit-detail-gutter-padding
|
var(--nbhd-space-11) | Gutter padding for the detail section, responsive to screen size. |
--nbhd-heroSplit-detail-gutter-margin
|
var(--nbhd-space-0) | Gutter margin for the detail section, responsive to screen size. |
--nbhd-heroSplit-detail-marginInline
|
var(--nbhd-space-0) var(--nbhd-heroSplit-detail-gutter-margin) | Inline margin for the detail section. |
--nbhd-heroSplit-detail-paddingBlock
|
var(--nbhd-space-0) var(--nbhd-heroSplit-detail-gutter-padding) | Block padding for the detail section. |
--nbhd-heroSplit-detail-inlineSize
|
100% | Inline size (width) of the detail section, responsive to screen size. |
--nbhd-heroSplit-visual-display
|
block | Display property for the visual container. |
--nbhd-heroSplit-visual-inlineSize
|
100% | Inline size (width) of the visual container. |
--nbhd-heroSplit-visual-maxInlineSize
|
100% | Maximum inline size (width) of the visual container, responsive to screen size. |
--nbhd-heroSplit-visual-overflow
|
hidden | Overflow behavior for the visual container. |
--nbhd-heroSplit-visual-borderStartStartRadius
|
var(--nbhd-borderRadius-0) | Border radius for the start-start corner of the visual container. |
--nbhd-heroSplit-visual-borderStartEndRadius
|
var(--nbhd-borderRadius-0) | Border radius for the start-end corner of the visual container. |
--nbhd-heroSplit-visual-borderEndStartRadius
|
var(--nbhd-borderRadius-0) | Border radius for the end-start corner of the visual container. |
--nbhd-heroSplit-visual-borderEndEndRadius
|
var(--nbhd-borderRadius-0) | Border radius for the end-end corner of the visual container. |
--nbhd-heroSplit-visual-boxShadow
|
var(--nbhd-shadow-lg) | Box shadow for the visual container, can be disabled with no-shadow prop. |
--nbhd-heroSplit-note-fontSize
|
var(--nbhd-fontSize-xs) | Font size for the note text element. |
--nbhd-heroSplit-note-fontStyle
|
italic | Font style for the note text element. |
--nbhd-heroSplit-note-marginBlock
|
var(--nbhd-space-12) var(--nbhd-space-0) | Block margin for the note text element. |
--nbhd-heroSplit-note-paddingInline
|
var(--nbhd-space-4) var(--nbhd-space-0) | Inline padding for the note text element. |
--nbhd-heroSplit-note-borderColor
|
var(--nbhd-accent) | Border color for the note text element's inline-start border. |
--nbhd-heroSplit-note-borderStyle
|
solid | Border style for the note text element's inline-start border. |
--nbhd-heroSplit-note-borderWidth
|
2px | Border width for the note text element's inline-start border. |