Humongotron Carousel
draft

A carousel made up of Humongotron slides.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdHumongotronCarousel } from '@fbin-web/neighborhood-core';
<nbhd-humongotron-carousel
  pagination
  navigation
  theme="primary-dark">
</nbhd-humongotron-carousel>

React 

import { NbhdHumongotronCarousel } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdHumongotronCarousel
      pagination
      navigation
      theme="primary-dark"></NbhdHumongotronCarousel>
  </>
);

Properties

Property Attribute Type Default Description
items Required array Content for items.
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.
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.
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

CSS Properties

Property Default Value
--nbhd-humongotronCarousel-marginInline auto
--nbhd-humongotronCarousel-maxInlineSize none
--nbhd-humongotronCarousel-minInlineSize 320px
--nbhd-humongotronCarousel-position relative

Dependencies

This component contains the following components as dependencies.