Headline Content | Components | Neighborhood Design System

Selected Brand

Loading

Code

HTML

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

<nbhd-headline-content id="nbhd-headlineContent">
  <nbhd-text
    variant="eyebrow"
    tag="div"
    >Fringilla Mollis Parturient</nbhd-text
  >
  <nbhd-text
    variant="title"
    tag="h2"
    >Headline Content Title</nbhd-text
  >
  <nbhd-text
    variant="subtitle"
    tag="h3"
    >Vulputate Vestibulum</nbhd-text
  >
  <nbhd-text tag="div">
    <p>Curabitur blandit tempus porttitor.</p>
  </nbhd-text>
  <nbhd-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>

React

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

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

Properties

Property	Attribute	Type	Default	Description
`data` Deprecated		`HeadlineContentData`		Content data object for the component. See Data Structure section for details.
`compact`	`compact`	`boolean`	`false`	Set the component `max-inline-size` to `--nbhd-maxInlineSize`
`fullWidth`	`full-width`	`boolean`	`false`	When enabled will allow the `content` to go full width of the component and have all component content `text-align` set to `start` (left).
`h1`	`h1`	`boolean`	`false`	Enable the `title` element to render as `<h1>`
`background`	`background`	`none \| primary-light \| secondary-light \| primary-dark \| secondary-dark`	`none`	Background 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

Data Structure

The HeadlineContentData interface defines the structure for content data used with the headline content component. This is deprecated; the preferred method is using slots.

Property	Type	Required	Description
`title`	`string`	No	Main title content
`eyebrow`	`string`	No	Short introductory content above the title.
`subtitle`	`string`	No	Content for secondary title that is under title.
`content`	`string`	No	General content block.
`cta`	`CTA`	No	Call to Action data object. See CTA interface for structure details.

CTA Structure

The CTA interface defines the structure for call-to-action objects used in headline content components.

Property	Type	Required	Description
`label`	`string`	Yes	The display text for the call-to-action button or link.
`href`	`string`	Yes	The URL or path that the call-to-action should navigate to when clicked.
`ariaLabel`	`string`	No	Accessible label for screen readers. If not provided, the label value will be used.
`external`	`boolean`	No	Whether the link opens in a new tab/window. When true, adds target='_blank' and rel='noopener noreferrer'.
`class`	`string`	No	Additional CSS class names to apply to the call-to-action element.

Slots

Name	Description
`eyebrow`	Eyebrow placement.
`title`	Title placement.
`subtitle`	Subtitle placement.
`content`	Content placement.
`cta`	Call to Action (CTA) placement.

CSS Parts

Name	Description
`base`	The main wrapper element.
`base-container`	The main container element.
`title`	The title element.
`eyebrow`	The eyebrow element.
`subtitle`	The subtitle element.
`content`	The content element.
`cta`	The cta element.

CSS Properties

Property	Default Value
`--nbhd-headlineContent-inlineSize`	100%
`--nbhd-headlineContent-marginInline`	var(--nbhd-space-0, 0)
`--nbhd-headlineContent-maxInlineSize`	100%
`--nbhd-headlineContent-minInlineSize`	var(--nbhd-minInlineSize, 320px)
`--nbhd-headlineContent-paddingBlock`	var(--nbhd-space-10, 40px) var(--nbhd-space-12, 48px)
`--nbhd-headlineContent-paddingInline`	var(--nbhd-space-0, 0)
`--nbhd-headlineContent-textAlign`	center
`--nbhd-headlineContent-content-marginInline`	var(--nbhd-space-auto, auto)
`--nbhd-headlineContent-content-maxInlineSize`	450px

Dependencies

This component contains the following components as dependencies.

Headline Content ready