Jumbotron
draft
Main featurette component with attention grabbing features
Loading
Code
HTML
import { NbhdJumbotron } from '@fbin-web/neighborhood-core';React
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
|
object
|
Content for component when prefab is enabled.
|
||
prefab
|
prefab
|
boolean
|
false
|
When enabled the component will use the data property for content and not the slots.
|
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-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. |
Data Properties
Data object property is only when the prefab property is enabled.
| 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. |
Slots
Slots are not available when the prefab property is enabled.
| Name | Description |
|---|
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-jumbotron-marginInline
|
var(--nbhd-space-0) |
--nbhd-jumbotron-maxInlineSize
|
100% |
--nbhd-jumbotron-minInlineSize
|
var(--nbhd-minInlineSize) |
--nbhd-jumbotron-aspectRatio
|
auto |
--nbhd-jumbotron-blockSize
|
auto |
--nbhd-jumbotron-minBlockSize
|
auto |
--nbhd-jumbotron-position
|
relative |
--nbhd-jumbotron-inlineSize
|
auto |
--nbhd-jumbotron-detail-alignItems
|
start |
--nbhd-jumbotron-detail-display
|
flex |
--nbhd-jumbotron-detail-flexDirection
|
column |
--nbhd-jumbotron-detail-justifyContent
|
start |
--nbhd-jumbotron-detail-order
|
0 |
--nbhd-jumbotron-detail-paddingBlock
|
40px |
--nbhd-jumbotron-detail-paddingInline
|
24px |
--nbhd-jumbotron-detail-position
|
static |
--nbhd-jumbotron-detail-textAlign
|
start |
--nbhd-jumbotron-detail-inlineSize
|
100% |
--nbhd-jumbotron-detail-zIndex
|
auto |
--nbhd-jumbotron-visual-aspectRatio
|
375 / 214 |
--nbhd-jumbotron-visual-insetBlockStart
|
auto |
--nbhd-jumbotron-visual-insetInlineStart
|
auto |
--nbhd-jumbotron-visual-minBlockSize
|
auto |
--nbhd-jumbotron-visual-position
|
relative |
--nbhd-jumbotron-visual-inlineSize
|
100% |