Minitron | Components | Neighborhood Design System

Example

Selected Brand

Loading

Code

HTML

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

<nbhd-minitron>
  <nbhd-badge slot="badge">New</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" 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 image-focus="center">
  </nbhd-image>
</nbhd-minitron>

React

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

const App = () => (
  <>
    <NbhdMinitron>
      <NbhdBadge slot="badge">New</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
        ariaLabel="Learn more about this thingy"
        ctaClass="fun-css-tracking-class">
        <span slot="before">B</span>
        Aenean
        <span slot="after">A</span>
      </NbhdCta>
      <NbhdImage
        slot="media"
        loading="lazy"
        src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
        alt="Fun ALT Slide 1 for images"
        imgClass="media-css-class-sld-1"
        crop
        imageFocus="center"></NbhdImage>
    </NbhdMinitron>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`reverse`	`reverse`	`boolean`	`false`	Whether the minitron layout should be reversed.
`compact`	`compact`	`boolean`	`false`	Set the component `max-inline-size` to `--nbhd-size-container-max`.
`shadow`	`shadow`	`boolean`	`false`	Add a shadow effect to the component.
`zoom`	`zoom`	`boolean`	`false`	Enable the hover zoom effect for the media.
`alignment`	`alignment`	`start \| center \| end`	`start`	The text alignment for the content.
`contentSurface`	`content-surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Content theme for the component surface.
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Background theme for the component.
`marginTop`	`margin-top`	`none \| small \| medium \| large`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`none \| small \| medium \| large`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`default \| none \| small \| medium \| large`	`default`	Adjust padding to the top of the component.
`paddingBottom`	`padding-bottom`	`default \| none \| small \| medium \| large`	`default`	Adjust padding to the bottom of the component.

Slots

Slots rendered by the component in the detail and media regions:

Name	Description
`badge`	Badge content rendered above the eyebrow and title sections.
`eyebrow`	Short introductory text displayed above the main title.
`title`	Primary headline content for the detail section.
`subtitle`	Supporting title displayed below the primary title.
`content`	Descriptive content block for supporting copy.
`cta`	Call-to-action content rendered after the supporting text.
`media`	Media content area for the visual region, typically an image or video.

CSS Parts

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

Name	Description
`minitron`	The root `<section>` element for the component.
`container`	The `<nbhd-container>` wrapper that surrounds the content layout.
`flex`	The `<nbhd-flex>` layout container that arranges the detail and visual regions.
`detail`	The text column containing the badge, eyebrow, title, subtitle, content, and CTA slot elements.
`visual`	The media column containing the visual slot.
`badge`	The badge slot element.
`eyebrow`	The eyebrow slot element.
`title`	The title slot element.
`subtitle`	The subtitle slot element.
`content`	The content slot element.
`cta`	The CTA slot element.
`media`	The media slot element for the image or video content.

Dependencies

This component contains the following components as dependencies.

Minitron ready