Humongotron Carousel
deprecated
A carousel made up of Humongotron slides.
Loading
Code
HTML
import { NbhdHumongotronCarousel } from '@fbin-web/neighborhood-core';<nbhd-humongotron-carousel pagination navigation background="primary-dark">
</nbhd-humongotron-carousel>React
import { NbhdHumongotronCarousel } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdHumongotronCarousel
pagination
navigation
background="primary-dark"></NbhdHumongotronCarousel>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
HumongotronData[]
|
Content for items. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-maxInlineSize.
|
h1
|
h1
|
boolean
|
false
|
Enable the title element to render as <h1>
|
contain
|
contain
|
boolean
|
false
|
When enabled this will set the component max-inline-size to 2000px.
|
constrainLogo
|
constrain-logo
|
boolean
|
false
|
Enable will constrain the logo to a max-block-size instead of max-inline-size.
|
opacity
|
opacity
|
number
|
35
|
Set the opacity for overlay. |
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. |
horizontalPlacement
|
horizontal-placement
|
left | center | right
|
left
|
The horizontal placement for the content. |
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background theme color for main component. |
loop
|
loop
|
boolean
|
false
|
Enable infinite carousel looping. |
fade
|
fade
|
boolean
|
false
|
Enable fade transition between slides instead of slide transition. |
speed
|
speed
|
slow | regular | fast
|
regular
|
Control the transition speed between slides. |
navigation
|
navigation
|
boolean
|
false
|
Enable carousel navigation arrows. |
navigationStyle
|
nav-style
|
solid | outlined | ghost
|
solid
|
Style variant for the navigation arrows. |
pagination
|
pagination
|
boolean
|
false
|
Enable carousel pagination dots. |
paginationStyle
|
pagination-style
|
circle | line
|
circle
|
Style variant for the pagination indicators. |
autoplay
|
autoplay
|
boolean
|
false
|
Enable automatic slide progression. |
autoplayInterval
|
autoplay-interval
|
2 | 3 | 4 | 5 | 6
|
5
|
Interval in seconds between automatic slide transitions. |
interval
|
interval
|
number
|
5000
|
Interval in milliseconds between automatic slide transitions (deprecated - use autoplayInterval). |
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
|
Item Structure
Each item in the items array should follow the HumongotronData interface structure.
| Property | Type | Required | Description |
|---|---|---|---|
media
|
Media
|
Yes | Media content for the slide (image or video). Contains src, alt, type, and optional class/crop properties. |
title
|
string
|
No | Main heading text for the slide. |
eyebrow
|
string
|
No | Small text above the title, typically used for categorization or branding. |
subtitle
|
string
|
No | Secondary heading text displayed below the title. |
content
|
string
|
No | Main body text content for the slide. |
logo
|
Logo
|
No | Logo image with optional href for linking. Extends Media interface with href and external properties. |
cta
|
CTA
|
No | Call-to-action button with label, href, and optional ariaLabel, external, and class properties. |
opacity
|
number
|
No | Opacity value for the slide overlay (15-100). |
constrainLogo
|
boolean
|
No | When true, constrains the logo to max-block-size instead of max-inline-size. |
Media Structure
Structure for media objects used in carousel items.
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | URL or path to the media file. |
alt
|
string
|
Yes | Alternative text for accessibility. |
type
|
image | video
|
Yes | Type of media content. |
class
|
string
|
No | Additional CSS class names. |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Crop position for the media. |
Logo Structure
Structure for logo objects (extends Media with additional properties).
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | URL or path to the logo image. |
alt
|
string
|
Yes | Alternative text for the logo. |
type
|
image | video
|
Yes | Type of media content (typically 'image' for logos). |
href
|
string
|
No | URL to link to when logo is clicked. |
external
|
boolean
|
No | Whether the logo link opens in a new tab/window. |
class
|
string
|
No | Additional CSS class names. |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Crop position for the logo image. |
CTA Structure
Structure for call-to-action objects used in carousel items.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Text displayed on the CTA button. |
href
|
string
|
Yes | URL that the CTA button links to. |
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 names for styling. |
CSS Parts
CSS parts that can be styled using the ::part() selector.
| Name | Description |
|---|---|
carousel-item
|
Each individual carousel slide wrapper element. |
logo
|
Logo image elements within carousel slides. |
eyebrow
|
Eyebrow text elements (small text above title). |
title
|
Main title/heading text elements. |
subtitle
|
Subtitle/secondary heading text elements. |
content
|
Main body content text elements. |
cta
|
Call-to-action button elements. |
image
|
Image media elements within carousel slides. |
video
|
Video media elements within carousel slides. |
CSS Properties
CSS custom properties that can be used to customize the appearance and behavior of the carousel.
| Property | Default Value |
|---|---|
--nbhd-humongotronCarousel-marginInline
|
auto |
--nbhd-humongotronCarousel-maxInlineSize
|
none |
--nbhd-humongotronCarousel-minInlineSize
|
320px |
--nbhd-humongotronCarousel-position
|
relative |
--nbhd-carousel-pagination-blockSize
|
var(--nbhd-space-11) |
--nbhd-carousel-pagination-maxInlineSize
|
350px |
--nbhd-carousel-pagination-position
|
relative |
--nbhd-carousel-nav-insetBlockStart
|
calc(var(--nbhd-space-11) / 2 * -1) |
--nbhd-carousel-nav-marginInline
|
auto |
--nbhd-carousel-nav-maxInlineSize
|
500px |
--nbhd-carousel-nav-position
|
relative |
--nbhd-carousel-paginationItem-backgroundColor-originColor
|
var(--nbhd-color-black) |
--nbhd-carousel-paginationItem-backgroundColor-alpha
|
0.3 |
--nbhd-carousel-paginationItem-blockSize
|
8px |
--nbhd-carousel-paginationItem-inlineSize
|
8px |
--nbhd-carousel-paginationItem-borderRadius
|
50% |
--nbhd-carousel-navArrow-backgroundColor-originColor
|
var(--nbhd-color-black) |
--nbhd-carousel-navArrow-backgroundColor-alpha
|
1 |
--nbhd-carousel-navArrow-blockSize
|
37px |
--nbhd-carousel-navArrow-inlineSize
|
37px |
--nbhd-carousel-navArrow-borderColor
|
var(--nbhd-color-black) |
--nbhd-carousel-navArrow-color
|
var(--nbhd-color-white) |
--nbhd-carousel-navArrow-borderRadius
|
50% |
Dependencies
This component contains the following components as dependencies.