Hero Split
ready

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

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdHeroSplit } from '@fbin-web/neighborhood-core';
<nbhd-hero-split>
  <nbhd-text slot="eyebrow" tag="div" variant="eyebrow">Fringilla Mollis Parturient</nbhd-text>
  <nbhd-text slot="title" variant="title" tag="h2">Cursus Condimentum Bibendum</nbhd-text>
  <nbhd-text slot="subtitle" tag="h3" variant="subtitle">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">
    Learn More
  </nbhd-cta>

  <nbhd-text slot="note" tag="div">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">
        Fringilla Mollis Parturient
      </NbhdText>
      <NbhdText
        slot="title"
        variant="title"
        tag="h2">
        Cursus Condimentum Bibendum
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle">
        Vulputate Vestibulum
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        Curabitur blandit tempus porttitor.
      </NbhdText>

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

      <NbhdText
        slot="note"
        tag="div">
        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
reverse reverse boolean false Reverse the layout so the media appears on the opposite side of the content.
shadow shadow boolean false Apply a shadow to the media block.
compact compact boolean false Set the component max-inline-size to --nbhd-size-container-max.
framed framed boolean false Wrap the split layout in a framed border container.
alignment alignment start | center | end start Set the text alignment for the content details.
contentAlignment content-alignment start | center | end center Align the content block within the split layout.
mediaRadius media-radius none | small | medium | large | full none Apply a border radius to the media element.
mediaRadiusPattern media-radius-pattern content | all content Choose whether the radius applies to the content-facing corners only or across all corners.
surface surface none | primary | secondary | inverse | inverse-secondary primary Surface theme color for the 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

Slots

Name Description
eyebrow Content rendered above the title, typically a short label or kicker.
title Primary headline content for the split hero layout.
subtitle Supporting heading or secondary line beneath the title.
content Main body copy for the detail column.
cta Call-to-action content rendered within the detail area.
note Secondary note or supporting text placed beneath the CTA.
media Visual media slot for the image or video content on the opposite side.

CSS Parts

Name Description
base The outer
wrapper that hosts the component layout.
base-container The nested container element that constrains the component width.
frame The framed wrapper applied when the framed property is enabled.
flex The split flex layout container holding the detail and media columns.
detail The text/content column of the hero split layout.
eyebrow The slotted eyebrow content area above the title.
title The slotted title content area.
subtitle The slotted subtitle content area.
content The slotted body content area.
cta The slotted CTA content area.
note The slotted note content area, styled as a standalone text block.
media The media column containing the image or video slot.
media-slot The actual slotted media content area inside the media column.

Dependencies

This component contains the following components as dependencies.