Hero Split
draft

Component that contains either a video or image as a visual complement to the content.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdHeroSplit } from '@fbin-web/neighborhood-core';
<nbhd-hero-split>
  <nbhd-text
    slot="eyebrow"
    tag="div"
    variant="eyebrow"
    theme="light"
    >Fringilla Mollis Parturient</nbhd-text
  >
  <nbhd-text
    slot="title"
    variant="title"
    tag="h2"
    theme="light"
    >Cursus Condimentum Bibendum</nbhd-text
  >
  <nbhd-text
    slot="subtitle"
    tag="h3"
    variant="subtitle"
    theme="light"
    >Vulputate Vestibulum</nbhd-text
  >
  <nbhd-text
    slot="content"
    tag="div"
    >Curabitur blandit tempus porttitor.</nbhd-text
  >

  <nbhd-cta
    variant="primary"
    slot="cta"
    href="go-to-this-page"
    css-class="fun-css-tracking-class"
    external=""
    aria-label="Learn more about this thingy"
    theme="light">
    Learn More
  </nbhd-cta>

  <nbhd-text
    slot="note"
    tag="div"
    theme="light"
    >This is a note - Nulla vitae elit libero, a pharetra augue.</nbhd-text
  >

  <nbhd-image
    slot="media"
    src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
    alt="Fun ALT test for images">
  </nbhd-image>
</nbhd-hero-split>

React 

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

const App = () => (
  <>
    <NbhdHeroSplit>
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow"
        theme="light">
        Fringilla Mollis Parturient
      </NbhdText>
      <NbhdText
        slot="title"
        variant="title"
        tag="h2"
        theme="light">
        Cursus Condimentum Bibendum
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle"
        theme="light">
        Vulputate Vestibulum
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        Curabitur blandit tempus porttitor.
      </NbhdText>

      <NbhdCta
        variant="primary"
        slot="cta"
        href="go-to-this-page"
        css-class="fun-css-tracking-class"
        external=""
        aria-label="Learn more about this thingy"
        theme="light">
        Learn More
      </NbhdCta>

      <NbhdText
        slot="note"
        tag="div"
        theme="light">
        This is a note - Nulla vitae elit libero, a pharetra augue.
      </NbhdText>

      <NbhdImage
        slot="media"
        src="https://moen.widen.net/content/8luiiucngz/original/1800-workstation-sinks-jumbotron-L.png"
        alt="Fun ALT test for images"></NbhdImage>
    </NbhdHeroSplit>
  </>
);

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.
noShadow no-shadow boolean false Remove the shadow.
reversed reversed boolean false Reverse the layout.
border border boolean false Add border to component.
topAligned top-aligned boolean false Set the alignment to top.
h1 h1 boolean false Enable the title element to render as <h1>
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
borderRadiusTopLeft border-radius-top-left none | small | medium | large | full none Adjust the border radius of the media element for the top left corner.
borderRadiusTopRight border-radius-top-right none | small | medium | large | full none Adjust the border radius of the media element for the top right corner.
borderRadiusBottomLeft border-radius-bottom-left none | small | medium | large | full none Adjust the border radius of the media element for the bottom left corner.
borderRadiusBottomRight border-radius-bottom-right none | small | medium | large | full none Adjust the border radius of the media element for the bottom right corner.

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.
note string Secondary content block.
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
eyebrow Eyebrow placement.
title Title placement.
subtitle Subtitle placement.
content Content placement.
cta Call to Action (CTA) placement.
note Note placement.
media Media placement.

CSS Parts

Name Description
base The main wrapper element.
base-container The main container element.
frame The container that gets border styling.
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
title The title element.
eyebrow The eyebrow element.
subtitle The subtitle element.
content The content element.
cta The cta element.
note The note element.

CSS Properties

Property Default Value
--nbhd-heroSplit-marginInline var(--nbhd-space-0)
--nbhd-heroSplit-maxInlineSize 100%
--nbhd-heroSplit-paddingBlock var(--nbhd-space-10)
--nbhd-heroSplit-frame-border 2px solid
--nbhd-heroSplit-frame-borderColor var(--nbhd-theme-accent)
--nbhd-heroSplit-frame-borderRadius var(--nbhd-borderRadius-sm)
--nbhd-heroSplit-frame-paddingBlock var(--nbhd-space-6)
--nbhd-heroSplit-frame-paddingInline var(--nbhd-space-6)
--nbhd-heroSplit-flex-alignItems center
--nbhd-heroSplit-flex-justifyContent space-between
--nbhd-heroSplit-detail-gutter-padding var(--nbhd-space-11)
--nbhd-heroSplit-detail-gutter-margin var(--nbhd-space-0)
--nbhd-heroSplit-detail-marginInline var(--nbhd-space-0) var(--nbhd-heroSplit-detail-gutter-margin)
--nbhd-heroSplit-detail-paddingBlock var(--nbhd-space-0) var(--nbhd-heroSplit-detail-gutter-padding)
--nbhd-heroSplit-detail-inlineSize 100%
--nbhd-heroSplit-visual-borderStartStartRadius var(--nbhd-borderRadius-0)
--nbhd-heroSplit-visual-borderStartEndRadius var(--nbhd-borderRadius-0)
--nbhd-heroSplit-visual-borderEndStartRadius var(--nbhd-borderRadius-0)
--nbhd-heroSplit-visual-borderEndEndRadius var(--nbhd-borderRadius-0)
--nbhd-heroSplit-visual-boxShadow var(--nbhd-shadow-lg)
--nbhd-heroSplit-visual-maxInlineSize 100%

Dependencies

This component contains the following components as dependencies.