Minitron
Minitron is a feature component with carousel functionality. Shares many of the same features as Jumbotron, just in a miniature presentation.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
Required
|
array
|
Content for items. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-maxInlineSize.
|
reversed
|
reversed
|
boolean
|
false
|
Reverse the layout. |
mediaOnly
|
media-only
|
boolean
|
false
|
Only display the media as item content.
|
noZoom
|
no-zoom
|
boolean
|
false
|
Turn off the hover zoom effect. |
noShadow
|
no-shadow
|
boolean
|
false
|
Remove the 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. |
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
|
itemTheme
|
item-theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background theme color for item. |
carousel
|
carousel
|
object
|
Carousel config object. |
Item Properties
Item properties for Minitron
| Property | Type | Description |
|---|---|---|
title
Required
|
string
|
Main headline content |
eyebrow
|
string
|
Short introductory content above the title. |
subtitle
|
string
|
Content for secondary title that is under title. |
content
|
string
|
General content block. |
badge
|
string
|
Badge content. |
cta
|
object
|
Call to Action data object. |
media
Required
|
object
|
Media data object. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
minitron-item
|
The Minitron item element. |
container
|
The main container element. |
flex
|
The flex container that wraps visual and detail. |
visual
|
The visual container. |
image
|
the image element. |
video
|
The video element. |
detail
|
The detail container |
badge
|
The badge element. |
title
|
The title element. |
eyebrow
|
The eyebrow element. |
subtitle
|
The subtitle element. |
content
|
The content element. |
cta
|
The cta element. |
carousel
|
The carousel element. |
carousel-container
|
The container within the carousel. |
carousel-item
|
The carousel item element. |
carousel-nav
|
The carousel navigation container. |
carousel-nav-previous
|
the carousel navigation previous element. |
carousel-nav-next
|
The cta element. |
carousel-nav-icon
|
The carousel navigation icon element. |
carousel-pagination
|
The carousel pagination container. |
Minitron Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-minitron-marginInline
|
0 |
--neighborhood-minitron-maxInlineSize
|
none |
--neighborhood-minitron-paddingBlock
|
var(--neighborhood-space-6) |
--neighborhood-minitron-position
|
relative |
Minitron Item Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-minitron-detail-alignItems
|
start |
--neighborhood-minitron-detail-alignSelf
|
center |
--neighborhood-minitron-detail-display
|
block |
--neighborhood-minitron-detail-paddingBlock
|
var(--neighborhood-space-10) var(--neighborhood-space-17) |
--neighborhood-minitron-detail-paddingInline
|
var(--neighborhood-space-10) |
--neighborhood-minitron-detail-position
|
static |
--neighborhood-minitron-detail-textAlign
|
start |
--neighborhood-minitron-detail-inlineSize
|
100% |
--neighborhood-minitron-visual-aspectRatio
|
350 / 188 |
--neighborhood-minitron-visual-overflow
|
hidden |
--neighborhood-minitron-visual-position
|
relative |
--neighborhood-minitron-visual-inlineSize
|
100% |
Eyebrow Styling Properties
Available styling CSS Properties for the Eyebrow element.
| Property | Default Value |
|---|---|
--neighborhood-eyebrow-color
|
var(--neighborhood-eyebrow-color-lightTheme) |
--neighborhood-eyebrow-fontFamily
|
inherit |
--neighborhood-eyebrow-fontSize
|
var(--neighborhood-fontSize-xs) |
--neighborhood-eyebrow-fontStyle
|
normal |
--neighborhood-eyebrow-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-eyebrow-letterSpacing
|
normal |
--neighborhood-eyebrow-lineHeight
|
var(--neighborhood-line-height-1-4) |
--neighborhood-eyebrow-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-2) |
--neighborhood-eyebrow-textTransform
|
none |
Title Styling Properties
Available styling CSS Properties for the Title element.
| Property | Default Value |
|---|---|
--neighborhood-title-color
|
var(--neighborhood-title-color-lightTheme) |
--neighborhood-title-fontFamily
|
inherit |
--neighborhood-title-fontSize
|
var(--neighborhood-fontSize-xl) |
--neighborhood-title-fontStyle
|
normal |
--neighborhood-title-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-title-letterSpacing
|
normal |
--neighborhood-title-lineHeight
|
var(--neighborhood-lineHeight-sm) |
--neighborhood-title-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-title-textTransform
|
none |
Subtitle Styling Properties
Available styling CSS Properties for the Subtitle element.
| Property | Default Value |
|---|---|
--neighborhood-subtitle-color
|
var(--neighborhood-subtitle-color-lightTheme) |
--neighborhood-subtitle-fontFamily
|
inherit |
--neighborhood-subtitle-fontSize
|
var(--neighborhood-fontSize-md) |
--neighborhood-subtitle-fontStyle
|
normal |
--neighborhood-subtitle-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-subtitle-lineHeight
|
normal |
--neighborhood-subtitle-marginBlock
|
0 var(--neighborhood-space-3) |
--neighborhood-subtitle-textTransform
|
none |
Content Styling Properties
Available styling CSS Properties for the Content element.
| Property | Default Value |
|---|---|
--neighborhood-content-color
|
inherit |
--neighborhood-content-fontFamily
|
inherit |
--neighborhood-content-fontSize
|
var(--neighborhood-fontSize-regular) |
--neighborhood-content-fontWeight
|
inherit |
--neighborhood-content-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-7) |
--neighborhood-content-textTransform
|
inherit |
CTA Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-cta-backgroundColor
|
transparent |
--neighborhood-cta-backgroundImage
|
none |
--neighborhood-cta-backgroundPosition
|
0 0 |
--neighborhood-cta-backgroundSize
|
100% |
--neighborhood-cta-borderColor
|
transparent |
--neighborhood-cta-borderRadius
|
2px |
--neighborhood-cta-borderStyle
|
solid |
--neighborhood-cta-borderWidth
|
2px |
--neighborhood-cta-color-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-color-hover-lightTheme
|
var(--neighborhood-fbin-color-fbinNavy) |
--neighborhood-cta-color-hover-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-cta-cursor
|
pointer |
--neighborhood-cta-display
|
inline-block |
--neighborhood-cta-fontFamily
|
var(--neighborhood-link-fontStack) |
--neighborhood-cta-fontSize
|
var(--neighborhood-fontSize-xxs) |
--neighborhood-cta-fontStyle
|
normal |
--neighborhood-cta-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-cta-letterSpacing
|
var(--neighborhood-letterSpacing-2) |
--neighborhood-cta-paddingBlock
|
var(--neighborhood-space-3) |
--neighborhood-cta-paddingInline
|
var(--neighborhood-space-9) |
--neighborhood-cta-position
|
relative |
--neighborhood-cta-textAlign
|
center |
--neighborhood-cta-textDecoration
|
none |
--neighborhood-cta-textDecorationThickness
|
auto |
--neighborhood-cta-textDecorationThickness-hover
|
auto |
--neighborhood-cta-textDecorationColor
|
inherit |
--neighborhood-cta-textTransform
|
uppercase |
--neighborhood-cta-textUnderlineOffset
|
auto |
--neighborhood-cta-transitionFunction
|
ease-in-out |
--neighborhood-cta-transitionDuration
|
0.2s |
--neighborhood-cta-transitionProperty
|
background-color, color, text-decoration |
CTA Primary Styling Properties
| Property | Default Value |
|---|---|
--neighborhood-ctaPrimary-backgroundColor-lightTheme
|
var(--neighborhood-color-black)) |
--neighborhood-ctaPrimary-backgroundColor-hover-lightTheme
|
rgba(var(--neighborhood-color-black-rgb), var(--neighborhood-cta-hover-opacity)) |
--neighborhood-ctaPrimary-borderColor-lightTheme
|
var(--neighborhood-fbin-color-black) |
--neighborhood-ctaPrimary-color-lightTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-color-hover-lightTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-backgroundColor-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-backgroundColor-hover-darkTheme
|
rgba(var(--neighborhood-color-black-rgb), var(--neighborhood-cta-hover-opacity)) |
--neighborhood-ctaPrimary-borderColor-darkTheme
|
var(--neighborhood-color-white) |
--neighborhood-ctaPrimary-color-darkTheme
|
var(--neighborhood-color-black)) |
--neighborhood-ctaPrimary-color-hover-darkTheme
|
var(--neighborhood-color-black)) |
Badge Styling Properties
Available styling CSS Properties for Badge element.
| Property | Default Value |
|---|---|
--neighborhood-badge-backgroundColor
|
rgba(var(--neighborhood-color-white-rgb), 0.74) |
-neighborhood-badge-color
|
var(--neighborhood-color-black) |
--neighborhood-badge-display
|
inline-block |
--neighborhood-badge-fontFamily
|
inherit |
--neighborhood-badge-fontSize
|
var(--neighborhood-fontSize-tiny) |
--neighborhood-badge-fontStyle
|
normal |
--neighborhood-badge-fontWeight
|
var(--neighborhood-fontWeight-700) |
--neighborhood-badge-insetBlockEnd
|
auto |
--neighborhood-badge-insetBlockStart
|
auto |
--neighborhood-badge-insetInlineEnd
|
auto |
--neighborhood-badge-insetInlineStart
|
auto |
--neighborhood-badge-letterSpacing
|
normal |
--neighborhood-badge-lineHeight
|
normal |
--neighborhood-badge-maxInlineSize
|
124px |
--neighborhood-badge-overflow
|
hidden |
--neighborhood-badge-paddingBlock
|
var(--neighborhood-space-1) |
--neighborhood-badge-paddingInline
|
var(--neighborhood-space-3) |
--neighborhood-badge-position
|
static |
--neighborhood-badge-textAlign
|
center |
--neighborhood-badge-textOverflow
|
ellipsis |
--neighborhood-badge-textTransform
|
uppercase |