Minitron Carousel
draft
in progress...
Loading
Code
HTML
import { NbhdMinitronCarousel } from '@fbin-web/neighborhood-core';<nbhd-minitron-carousel prefab> </nbhd-minitron-carousel>React
import { NbhdMinitronCarousel } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdMinitronCarousel prefab></NbhdMinitronCarousel>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
array
|
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. |
mediaOnly
|
media-only
|
boolean
|
false
|
Only display the media as item content.
|
zoom
|
zoom
|
boolean
|
false
|
Enable the hover zoom effect. |
shadow
|
shadow
|
boolean
|
false
|
Add shadow. |
h1
|
h1
|
boolean
|
false
|
Enable the title element to render as <h1>
|
alignment
|
alignment
|
left | center | right
|
left
|
The text alignment for the content. |
backgroundTheme
|
background-theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background theme color for main component. |
contentTheme
|
content-theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background theme color for content container. |
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-minitronCarousel-marginInline
|
0 |
--nbhd-minitronCarousel-maxInlineSize
|
none |
--nbhd-minitron-paddingBlock
|
var(--nbhd-space-6) |
--nbhd-minitronCarousel-position
|
relative |
--nbhd-minitronCarousel-shell-boxShadow
|
none |