Minitron | Components | Neighborhood Design System

Selected Brand

Loading

Code

HTML

import { NbhdMinitron } from '@fbin-web/neighborhood-core';

<nbhd-minitron>
  <nbhd-badge slot="badge">fun</nbhd-badge>
  <nbhd-text slot="eyebrow" tag="div" variant="eyebrow">
    Elit Sem
  </nbhd-text>
  <nbhd-text tag="h2" variant="title" slot="title">
    Fun Title
  </nbhd-text>
  <nbhd-text slot="subtitle" tag="h3" variant="subtitle">
    Dapibus Porta
  </nbhd-text>
  <nbhd-text slot="content" tag="div">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  </nbhd-text>
  <nbhd-cta slot="cta" variant="primary" href="go-to-this-page" external="" aria-label="Learn more about this thingy"
    cta-class="fun-css-tracking-class">
    <span slot="before">B</span>
    Aenean
    <span slot="after">A</span>
  </nbhd-cta>
  <nbhd-image slot="media" breakpoints="" responsive="" sm-width="350" sm-height="188" md-width="698" md-height="375"
    lg-width="745" lg-height="400" loading="lazy"
    src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
    alt="Fun ALT Slide 1 for images" img-class="media-css-class-sld-1" crop="" position="center">
  </nbhd-image>
</nbhd-minitron>

React

import {
  NbhdMinitron,
  NbhdBadge,
  NbhdText,
  NbhdCta,
  NbhdImage,
} from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdMinitron>
      <NbhdBadge slot="badge">fun</NbhdBadge>
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow">
        Elit Sem
      </NbhdText>
      <NbhdText
        tag="h2"
        variant="title"
        slot="title">
        Fun Title
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle">
        Dapibus Porta
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </NbhdText>
      <NbhdCta
        slot="cta"
        variant="primary"
        href="go-to-this-page"
        external=""
        aria-label="Learn more about this thingy"
        cta-class="fun-css-tracking-class">
        <span slot="before">B</span>
        Aenean
        <span slot="after">A</span>
      </NbhdCta>
      <NbhdImage
        slot="media"
        breakpoints=""
        responsive=""
        sm-width="350"
        sm-height="188"
        md-width="698"
        md-height="375"
        lg-width="745"
        lg-height="400"
        loading="lazy"
        src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
        alt="Fun ALT Slide 1 for images"
        img-class="media-css-class-sld-1"
        crop=""
        position="center"></NbhdImage>
    </NbhdMinitron>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`data` Deprecated		`MinitronData`		Content data object for the component. See Data Properties below for structure.
`h1`	`h1`	`boolean`	`false`	Enable the `title` element to render as `<h1>` and reflects to attribute.
`reversed`	`reversed`	`boolean`	`false`	Reverse the layout and reflects to attribute.
`compact`	`compact`	`boolean`	`false`	Set the component `max-inline-size` to `--nbhd-maxInlineSize` and reflects to attribute.
`shadow`	`shadow`	`boolean`	`false`	Add shadow effect and reflects to attribute.
`zoom`	`zoom`	`boolean`	`false`	Enable the hover zoom effect and reflects to attribute.
`mediaOnly`	`media-only`	`boolean`	`false`	Only display the `media` as item content and reflects to attribute.
`carousel`	`carousel`	`boolean`	`false`	Enable carousel layout mode and reflects to attribute.
`alignment`	`alignment`	`left \| center \| right`	`left`	The text alignment for the content.
`contentBackground`	`content-background`	`primary-light \| secondary-light \| primary-dark \| secondary-dark`	`primary-light`	Background color for content container.
`background`	`background`	`none \| primary-light \| secondary-light \| primary-dark \| secondary-dark`	`primary-light`	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

Data Structure

Structure of the MinitronData object used for the data property. This is deprecated; the preferred method is using slots.

Property	Type	Required	Description
`title`	`string`	No	Main headline content
`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
`badge`	`string`	No	Badge text content that appears above other content
`cta`	`CTA`	No	Call to Action object with href, label, and optional properties
`media`	`Media`	Yes	Media object containing src, alt, and optional properties for images or videos
`mediaOnly`	`boolean`	No	When true, only displays the media content without text elements

CTA Structure

Call-to-Action object structure for 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

Media Structure

Media object structure for images and videos:

Property	Type	Required	Description
`src`	`string`	Yes	Media source URL or path
`alt`	`string`	Yes	Alternative text for accessibility
`type`	`image \| video`	Yes	Type of media content
`class`	`string`	No	Additional CSS class for styling
`crop`	`none \| center \| top \| top-right \| right \| bottom-right \| bottom \| bottom-left \| left \| top-left`	No	Crop position when using Widen API

Slots

Available slots for customizing minitron content:

Name	Description
`badge`	Badge content that appears above other content elements.
`eyebrow`	Short introductory text displayed above the title.
`title`	Main headline content area.
`subtitle`	Secondary title displayed below the main title.
`content`	General content block for descriptive text.
`cta`	Call-to-action button or link content.
`media`	Media content area for images or videos.

CSS Parts

CSS parts that can be styled using the ::part() selector:

Name	Description
`minitron`	The main `<section>` wrapper element.
`container`	The container wrapper that holds all minitron content.
`flex`	The flex container that manages layout between visual and detail sections.
`detail`	The detail section containing text content elements.
`visual`	The visual section containing media elements.
`badge`	The badge slot container for badge content.
`eyebrow`	The eyebrow slot container for introductory text.
`title`	The title slot container for main headline content.
`subtitle`	The subtitle slot container for secondary title content.
`content`	The content slot container for descriptive text.
`cta`	The CTA slot container for call-to-action elements.
`media`	The media slot container for images and videos.

CSS Properties

CSS custom properties that can be used to customize the minitron appearance and layout:

Property	Default Value
`--nbhd-minitron-marginInline`	0
`--nbhd-minitron-maxInlineSize`	none
`--nbhd-minitron-paddingBlock`	var(--nbhd-space-6, 24px)
`--nbhd-minitron-position`	relative
`--nbhd-minitron-borderRadius`	0
`--nbhd-minitron-boxShadow`	none
`--nbhd-minitron-overflow`	visible
`--nbhd-minitron-detail-alignItems`	start
`--nbhd-minitron-detail-alignSelf`	center
`--nbhd-minitron-detail-display`	block
`--nbhd-minitron-detail-paddingBlock`	var(--nbhd-space-10, 40px) var(--nbhd-space-17, 68px)
`--nbhd-minitron-detail-paddingInline`	var(--nbhd-space-10, 40px)
`--nbhd-minitron-detail-position`	static
`--nbhd-minitron-detail-textAlign`	start
`--nbhd-minitron-detail-inlineSize`	100%
`--nbhd-minitron-visual-aspectRatio`	350 / 188
`--nbhd-minitron-visual-overflow`	hidden
`--nbhd-minitron-visual-position`	relative
`--nbhd-minitron-visual-inlineSize`	100%
`--nbhd-minitron-visual-transform`	scale(1)
`--nbhd-minitron-visual-transitionDuration`	300ms
`--nbhd-minitron-visual-transitionTimingFunction`	ease-in-out
`--nbhd-minitron-hover-transform`	scale(1.05)
`--nbhd-minitron-shadow-boxShadow`	var(--nbhd-shadow-medium, 0 4px 8px rgba(0, 0, 0, 0.1))

Dependencies

This component contains the following components as dependencies.

Minitron ready