Jumbotron Carousel
deprecated
A carousel made up of Jumbotron slides.
Loading
Code
HTML
import { NbhdJumbotronCarousel } from '@fbin-web/neighborhood-core';<nbhd-jumbotron-carousel background="secondary-light"> </nbhd-jumbotron-carousel>React
import { NbhdJumbotronCarousel } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdJumbotronCarousel background="secondary-light"></NbhdJumbotronCarousel>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
JumbotronData[]
|
Array of jumbotron data objects for carousel slides. Each item can contain title, subtitle, content, media, CTA, and logo properties. See Item Structure below for details. | ||
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. |
constrainLogo
|
constrain-logo
|
boolean
|
false
|
Constrain the logo to a max-block-size instead of max-inline-size. |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background 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
|
contentBackground
|
content-background
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background color for carousel items. |
loop
|
loop
|
boolean
|
false
|
Enable infinite carousel looping. |
autoplay
|
autoplay
|
boolean
|
false
|
Enable carousel autoplay. |
interval
|
interval
|
number
|
5000
|
Autoplay interval in milliseconds. |
fade
|
fade
|
boolean
|
false
|
Enable fade transition instead of slide. |
speed
|
speed
|
slow | regular | fast
|
regular
|
Carousel transition speed. |
navigationStyle
|
nav-style
|
solid | outlined | ghost
|
solid
|
Navigation button style. |
navigation
|
navigation
|
boolean
|
false
|
Enable navigation arrows. |
pagination
|
pagination
|
boolean
|
false
|
Enable pagination dots. |
paginationStyle
|
pagination-style
|
circle | line
|
circle
|
Pagination dot style. |
autoplayInterval
|
autoplay-interval
|
2 | 3 | 4 | 5 | 6
|
5
|
Autoplay interval in seconds. |
Item Structure
Each carousel item follows the JumbotronData structure with the following properties:
| Name | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | Main headline content for the slide |
eyebrow
|
string
|
No | Short introductory content above the title |
subtitle
|
string
|
No | Content for secondary title that appears under the main title |
content
|
string
|
No | General content block for descriptive text |
logo
|
Logo
|
No | Logo media data object. See Logo Structure below. |
cta
|
CTA
|
No | Call to Action data object. See CTA Structure below. |
media
|
Media
|
No | Media data object. See Media Structure below. |
Media Structure
Media object structure for carousel slide images and videos:
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | Media source URL or path |
alt
|
string
|
Yes | Alternative text for accessibility |
class
|
string
|
No | Additional CSS class for styling |
type
|
image | video
|
Yes | Type of media content |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Crop position when using Widen API |
CTA Structure
Call-to-Action object structure for carousel slide buttons and links:
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Button or link text |
href
|
string
|
Yes | URL or path for the link destination |
ariaLabel
|
string
|
No | Accessible label for screen readers |
external
|
boolean
|
No | Whether the link opens in a new tab/window |
class
|
string
|
No | Additional CSS class for styling |
Logo Structure
Logo object structure for carousel slide logos (extends Media structure with additional properties):
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | Logo image source URL or path |
alt
|
string
|
Yes | Alternative text for accessibility |
class
|
string
|
No | Additional CSS class for styling |
type
|
image | video
|
Yes | Type of media content |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Crop position when using Widen API |
href
|
string
|
No | URL or path when logo is clickable |
external
|
boolean
|
No | Whether the logo link opens in a new tab/window |
CSS Parts
CSS parts that can be styled using the ::part() selector:
| Name | Description |
|---|---|
base
|
The main <section> wrapper element.
|
container
|
The carousel slides container that holds all slides. |
slide
|
Individual slide wrapper containing jumbotron content. |
slide-active
|
The currently active/visible slide. |
navigation
|
Navigation controls wrapper containing prev/next buttons. |
nav-button
|
Individual navigation buttons (previous and next). |
nav-button-prev
|
The previous navigation button. |
nav-button-next
|
The next navigation button. |
pagination
|
Pagination container holding all indicator dots/buttons. |
pagination-button
|
Individual pagination indicator buttons. |
pagination-button-active
|
The active pagination indicator for the current slide. |
CSS Properties
CSS custom properties that can be used to customize the carousel appearance:
| Property | Default Value |
|---|---|
--nbhd-jumbotronCarousel-aspectRatio
|
auto |
--nbhd-jumbotronCarousel-blockSize
|
auto |
--nbhd-jumbotronCarousel-inlineSize
|
100% |
--nbhd-jumbotronCarousel-marginInline
|
auto |
--nbhd-jumbotronCarousel-maxInlineSize
|
100% |
--nbhd-jumbotronCarousel-minInlineSize
|
var(--nbhd-minInlineSize, 320px) |
--nbhd-jumbotronCarousel-transitionDuration
|
300ms |
--nbhd-jumbotronCarousel-transitionTimingFunction
|
ease-in-out |
--nbhd-jumbotronCarousel-slideGap
|
0 |
--nbhd-jumbotronCarousel-navigation-blockSize
|
48px |
--nbhd-jumbotronCarousel-navigation-inlineSize
|
48px |
--nbhd-jumbotronCarousel-navigation-backgroundColor
|
var(--nbhd-color-surface-primary) |
--nbhd-jumbotronCarousel-navigation-borderRadius
|
50% |
--nbhd-jumbotronCarousel-navigation-color
|
var(--nbhd-color-text-primary) |
--nbhd-jumbotronCarousel-pagination-gap
|
var(--nbhd-space-2, 8px) |
--nbhd-jumbotronCarousel-pagination-button-blockSize
|
12px |
--nbhd-jumbotronCarousel-pagination-button-inlineSize
|
12px |
--nbhd-jumbotronCarousel-pagination-button-backgroundColor
|
var(--nbhd-color-surface-secondary) |
--nbhd-jumbotronCarousel-pagination-button-borderRadius
|
50% |
--nbhd-jumbotronCarousel-pagination-button-active-backgroundColor
|
var(--nbhd-color-surface-primary) |