Hero Split

npm install @fbin-web/neighborhood-core

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>

npm install @fbin-web/neighborhood-react

import { NbhdHeroSplit } from '@fbin-web/neighborhood-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>
  </>
);