Headline Content
ready

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

Example

icon-storybook-default View Storybook
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"
        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 none | primary | secondary | inverse | inverse-secondary primary Sets the surface treatment applied to the component background and inherited text styles.
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 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.

Dependencies

This component contains the following components as dependencies.