Headline Content

Ready

Headline Content is a designed to contain brief introductory content that is centered aligned by default.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-headline-content id="nbhd-headlineContent">
  <nbhd-text
    slot="eyebrow"
    variant="eyebrow"
    tag="div">
    Fringilla Mollis Parturient
  </nbhd-text>
  <nbhd-text
    slot="title"
    variant="title"
    tag="h2"
    >Headline Content Title</nbhd-text
  >
  <nbhd-text
    slot="subtitle"
    variant="subtitle"
    tag="h3"
    >Vulputate Vestibulum</nbhd-text
  >
  <nbhd-text
    slot="content"
    tag="div">
    <p>Curabitur blandit tempus porttitor.</p>
  </nbhd-text>
  <nbhd-cta
    slot="cta"
    href="/go-to-this-page"
    aria-label="Learn more about this"
    css-class="fun-css-tracking-class">
    Learn More
  </nbhd-cta>
</nbhd-headline-content>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const App = () => (
  <>
    <NbhdHeadlineContent id="nbhd-headlineContent">
      <NbhdText
        slot="eyebrow"
        tag="div"
        variant="eyebrow">
        Fringilla Mollis Parturient
      </NbhdText>
      <NbhdText
        slot="title"
        tag="h2"
        variant="title">
        Headline Content Title
      </NbhdText>
      <NbhdText
        slot="subtitle"
        tag="h3"
        variant="subtitle">
        Vulputate Vestibulum
      </NbhdText>
      <NbhdText
        slot="content"
        tag="div">
        <p>Curabitur blandit tempus porttitor.</p>
      </NbhdText>
      <NbhdCta
        slot="cta"
        href="/go-to-this-page"
        ariaLabel="Learn more about this"
        cssClass="fun-css-tracking-class">
        Learn More
      </NbhdCta>
    </NbhdHeadlineContent>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`compact`	`compact`	`boolean`	`false`	Limits the component to a max inline size of `--nbhd-size-container-max` and centers its layout.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the surface treatment applied to the component background and inherited text styles.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`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`	`defaultnonesmallmediumlarge`	`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`	Optional short label rendered above the title, typically used for a category or intro label.
`title`	Primary headline content rendered as the main title of the component.
`subtitle`	Secondary supporting heading displayed beneath the main title.
`content`	Main body copy or supporting text block placed beneath the subtitle.
`cta`	Optional call-to-action content rendered after the body copy.

CSS Parts

Name	Description
`base`	The root section element that wraps the headline content layout.
`base-container`	The inner container element that holds the slotted headline content.
`eyebrow`	The slotted eyebrow label area rendered above the title.
`title`	The slotted primary title area.
`subtitle`	The slotted supporting subtitle area.
`content`	The slotted body content area.
`cta`	The slotted call-to-action area.

nbhd-headline-content::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-headline-content 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-headlineContent-content-display`	—	`block`
`--nbhd-headlineContent-content-marginInline`	—	`auto`
`--nbhd-headlineContent-content-maxInlineSize`	—	`28.125rem`
`--nbhd-headlineContent-host-display`	—	`block`
`--nbhd-headlineContent-inlineSize`	—	`100%`
`--nbhd-headlineContent-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-headlineContent-maxInlineSize`	—	`100%`
`--nbhd-headlineContent-minInlineSize`	`--nbhd-size-container-min`	`320px`
`--nbhd-headlineContent-paddingBlock`	`--nbhd-space-10 --nbhd-space-12`	`40px 48px`
`--nbhd-headlineContent-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-headlineContent-textAlign`	—	`center`

Dependencies

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

ContainerReady <nbhd-container> TextReady <nbhd-text> CTAReady <nbhd-cta>