Minitron

Ready

Minitron is a feature component that shares many of the same features as Jumbotron, just in a miniature presentation.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<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"
    css-class="fun-css-tracking-class">
    <span slot="prefix">B</span>
    Aenean
    <span slot="suffix">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"
    css-class="media-css-class-sld-1"
    crop
    image-focus="center">
  </nbhd-image>
</nbhd-minitron>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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="prefix">B</span>
        Aenean
        <span slot="suffix">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>
  </>
);

Media Dimensions

Image dimensions are preset by the component, so width and height do not need to be provided on nbhd-image. When using provider="widen", images are resized and cropped to these dimensions using image-focus as the crop point.

Breakpoint	Dimension	Aspect Ratio
`Small (≤767px)`	350px x 188px	1.86:1
`Medium (≥768px)`	698px x 375px	1.86:1
`Large (≥1024px)`	745px x 400px	1.86:1

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`	`startcenterend`	`start`	The text alignment for the content.
`contentSurface`	`content-surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Content theme for the component surface.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Background theme for the component.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component.
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component.
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the top of the component.
`paddingBottom`	`padding-bottom`	`defaultnonesmallmediumlarge`	`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.

nbhd-minitron::part(minitron) {
  /* your styles */
}

CSS Properties

Set these on nbhd-minitron or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-minitron-badge-insetBlockStart`	—	`0`
`--nbhd-minitron-badge-insetInlineStart`	—	`0`
`--nbhd-minitron-badge-position`	—	`absolute`
`--nbhd-minitron-badge-reverse-insetInlineEnd`	—	`0`
`--nbhd-minitron-badge-reverse-insetInlineStart`	—	`auto`
`--nbhd-minitron-detail-alignItems`	—	`start`
`--nbhd-minitron-detail-alignSelf`	—	`center`
`--nbhd-minitron-detail-bpLg-inlineSize`	—	`40%`
`--nbhd-minitron-detail-bpLg-paddingBlock`	`--nbhd-space-15 --nbhd-space-22`	`60px 88px`
`--nbhd-minitron-detail-bpLg-position`	—	`static`
`--nbhd-minitron-detail-bpMd-paddingBlock`	`--nbhd-space-15`	`60px`
`--nbhd-minitron-detail-bpMd-paddingInline`	`--nbhd-space-17`	`68px`
`--nbhd-minitron-detail-display`	—	`block`
`--nbhd-minitron-detail-inlineSize`	—	`100%`
`--nbhd-minitron-detail-paddingBlock`	`--nbhd-space-10 --nbhd-space-17`	`40px 68px`
`--nbhd-minitron-detail-paddingInline`	`--nbhd-space-10`	`40px`
`--nbhd-minitron-detail-position`	—	`relative`
`--nbhd-minitron-detail-textAlign`	—	`start`
`--nbhd-minitron-embedded-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-minitron-embedded-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-minitron-flex-boxShadow`	`--nbhd-shadow-none`	`none`
`--nbhd-minitron-flex-inlineSize`	—	`100%`
`--nbhd-minitron-flex-position`	—	`relative`
`--nbhd-minitron-host-display`	—	`block`
`--nbhd-minitron-host-inlineSize`	—	`100%`
`--nbhd-minitron-inlineSize`	—	`100%`
`--nbhd-minitron-marginInline`	—	`0`
`--nbhd-minitron-maxInlineSize`	—	`100%`
`--nbhd-minitron-media-aspectRatio`	—	`350 / 188`
`--nbhd-minitron-media-asset-blockSize`	—	`100%`
`--nbhd-minitron-media-asset-insetBlockStart`	—	`0`
`--nbhd-minitron-media-asset-insetInlineStart`	—	`0`
`--nbhd-minitron-media-asset-objectFit`	—	`cover`
`--nbhd-minitron-media-asset-position`	—	`absolute`
`--nbhd-minitron-media-asset-transitionDuration`	—	`0.5s`
`--nbhd-minitron-media-asset-transitionProperty`	—	`transform`
`--nbhd-minitron-media-bpLg-aspectRatio`	—	`745 / 400`
`--nbhd-minitron-media-bpLg-inlineSize`	—	`60%`
`--nbhd-minitron-media-bpMd-aspectRatio`	—	`688 / 375`
`--nbhd-minitron-media-flexShrink`	—	`0`
`--nbhd-minitron-media-full-aspectRatio`	—	`16 / 9`
`--nbhd-minitron-media-inlineSize`	—	`100%`
`--nbhd-minitron-media-overflow`	—	`hidden`
`--nbhd-minitron-media-position`	—	`relative`
`--nbhd-minitron-media-zoom-hover-transform`	—	`scale(1.1)`
`--nbhd-minitron-paddingBlock`	`--nbhd-space-6`	`24px`
`--nbhd-minitron-position`	—	`relative`
`--nbhd-minitron-reverse-shadow`	`--nbhd-shadow-lg-reverse`	`20px 10px 20px rgb(from #000000 r g b / 0.15)`
`--nbhd-minitron-shadow`	`--nbhd-shadow-lg`	`-20px 10px 20px rgb(from #000000 r g b / 0.15)`

Dependencies

Child components <nbhd-minitron> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text> CTAReady <nbhd-cta> BadgeReady <nbhd-badge> ImageReady <nbhd-image> VideoReady <nbhd-video> FlexReady <nbhd-flex> ContainerReady <nbhd-container>