Headline Content | Components | Neighborhood Design System

Styled Version

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`		`object`		Content for component when the `prefab` property is set.
`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`
`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>`
`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

Data Properties

Data object property is only when the prefab property is enabled.

Property	Type	Description
`title`	`string`	Main title content
`eyebrow`	`string`	Short introductory content above the title.
`subtitle`	`string`	Content for secondary title that is under title.
`content`	`string`	General content block.
`cta`	`object`	Call to Action 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.

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-marginInline`	var(--nbhd-space-0)
`--nbhd-headlineContent-maxInlineSize`	100%
`--nbhd-headlineContent-minInlineSize`	var(--nbhd-minInlineSize)
`--nbhd-headlineContent-paddingBlock`	var(--nbhd-space-10) var(--nbhd-space-12)
`--nbhd-headlineContent-textAlign`	center
`--nbhd-headlineContent-inlineSize`	100%
`--nbhd-headlineContent-content-marginInline`	var(--nbhd-space-auto)
`--nbhd-headlineContent-content-maxInlineSize`	450px

Dependencies

This component contains the following components as dependencies.

Headline Content draft