Minitron
draft

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

icon-storybook-default Open in Storybook
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"
    theme="light">
    Elit Sem
  </nbhd-text>
  <nbhd-text
    tag="h2"
    variant="title"
    slot="title"
    theme="light">
    Fun Title
  </nbhd-text>
  <nbhd-text
    slot="subtitle"
    tag="h3"
    variant="subtitle"
    theme="light">
    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"
    theme="light"
    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"
        theme="light">
        Elit Sem
      </NbhdText>
      <NbhdText
        tag="h2"
        variant="title"
        slot="title"
        theme="light">
        Fun Title
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle"
        theme="light">
        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"
        theme="light"
        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 object 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

Data Properties

Data object property is only when the prefab property is enabled.

Property Type Description
title 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.

Slots

Slots are not available when the prefab property is enabled.

Name Description
badge Badge placement.
eyebrow Eyebrow placement.
title Title placement.
subtitle Subtitle placement.
content Content placement.
cta Call to Action (CTA) placement.
media Media placement.

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.

CSS Properties

Property Default Value
--nbhd-minitron-marginInline 0
--nbhd-minitron-maxInlineSize none
--nbhd-minitron-paddingBlock var(--nbhd-space-6)
--nbhd-minitron-position relative
--nbhd-minitron-detail-alignItems start
--nbhd-minitron-detail-alignSelf center
--nbhd-minitron-detail-display block
--nbhd-minitron-detail-paddingBlock var(--nbhd-space-10) var(--nbhd-space-17)
--nbhd-minitron-detail-paddingInline var(--nbhd-space-10)
--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%

Dependencies

This component contains the following components as dependencies.