Headline Content
Headline Content is a designed to contain brief introductory content that is centered aligned by default.
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
|
fullWidth
|
full-width
|
boolean
|
false
|
When enabled will allow the content to go full width of the component and have all component content text-align set to start (left).
|
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
|
Data Properties
Main data properties for Headline Content
| 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. |
cta
|
object
|
Call to Action data object. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
base-container
|
The main container element. |
title
|
The title element. |
eyebrow
|
The eyebrow element. |
subtitle
|
The subtitle element. |
content
|
The content element. |
cta
|
The cta element. |
Headline Content Styling Properties
Available styling CSS Properties for the Headline Content component.
| Property | Default Value |
|---|---|
--neighborhood-headlineContent-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-headlineContent-maxInlineSize
|
100% |
--neighborhood-headlineContent-minInlineSize
|
var(--neighborhood-minInlineSize) |
--neighborhood-headlineContent-paddingBlock
|
var(--neighborhood-space-10) var(--neighborhood-space-12) |
--neighborhood-headlineContent-textAlign
|
center |
--neighborhood-headlineContent-inlineSize
|
100% |
--neighborhood-headlineContent-content-marginInline
|
var(--neighborhood-space-auto) |
--neighborhood-headlineContent-content-maxInlineSize
|
450px |
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)) |