Jumbotron Carousel
draft
in progress...
Loading
Code
HTML
import { NbhdJumbotronCarousel } from '@fbin-web/neighborhood-core';<nbhd-jumbotron-carousel background-theme="secondary-light"> </nbhd-jumbotron-carousel>React
import { NbhdJumbotronCarousel } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdJumbotronCarousel background-theme="secondary-light"></NbhdJumbotronCarousel>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
array
|
Content for component. | ||
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. |
backgroundTheme
|
backgroundTheme
|
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
|
contentTheme
|
content-theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background theme color for item. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-jumbotronCarousel-marginInline
|
auto |