This is documentation for Neighborhood v1 and may be outdated. Please visit the latest Neighborhood Design System documentation for latest features.

Headline Content
ready

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

Open in new window
Viewport: 
<section class="nbhd-headline-content   super-magic nbhd-background-theme-primary-light " id="headline-content-01">
  <div class="nbhd-container nbhd-headline-content__container">
  <div class="nbhd-eyebrow nbhd-headline-content__eyebrow">
    Vehicula Condimentum</div>
    <h1 class="nbhd-title nbhd-headline-content__title">Integer posuere erat&#8480; a ante venenatis</h1>
    <h3 class="nbhd-subtitle nbhd-headline-content__subtitle">Pellentesque Lorem Etiam</h3>
    <div class="nbhd-content nbhd-headline-content__content">
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
    <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-headline-content__cta" href="#go-here" target="_blank" aria-label="Additional context for this link">Call to Action</a>
  </div>
</section>

Variants

Headline Content can be presented in various variants. The eyebrow, subtitle content and call to action button do not need to be provided. There is also option for the content area to be full width. And an option for compact layout to max the layout to container not the window.

No Subtitle

No subtitle provided and with Secondary Light component background.

Open in new window
Viewport: 
<section class="nbhd-headline-content   super-magic nbhd-background-theme-secondary-light " id="headline-content-02">
  <div class="nbhd-container nbhd-headline-content__container">
  <div class="nbhd-eyebrow nbhd-headline-content__eyebrow">
    Vehicula Condimentum</div>
    <h2 class="nbhd-title nbhd-headline-content__title">Aenean Porta Condimentum Ipsum</h2>
    <div class="nbhd-content nbhd-headline-content__content">
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
    <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-headline-content__cta" href="#go-here" target="_blank" aria-label="Additional context for this link">Call to Action</a>
  </div>
</section>

Full Width

With componentFullWidth enabled, content area width is the entire width of the container and left aligned. Shown with Primary Light component background.

Open in new window
Viewport: 
<section class="nbhd-headline-content  nbhd-headline-content--full-width super-magic nbhd-background-theme-primary-light " id="headline-content-03">
  <div class="nbhd-container nbhd-headline-content__container">
  <div class="nbhd-eyebrow nbhd-headline-content__eyebrow">
    Vehicula Condimentum</div>
    <h2 class="nbhd-title nbhd-headline-content__title">Magna Egestas Ornare</h2>
    <h3 class="nbhd-subtitle nbhd-headline-content__subtitle">Pellentesque Lorem Etiam</h3>
    <div class="nbhd-content nbhd-headline-content__content">
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
  </div>
</section>

Compact

With componentCompact enabled the Headline Content has a max width of the container instead of width of the window. Shown with Secondary Dark component background.

Open in new window
Viewport: 
<section class="nbhd-headline-content nbhd-headline-content--compact  super-magic nbhd-background-theme-secondary-dark " id="headline-content-04">
  <div class="nbhd-container nbhd-headline-content__container">
  <div class="nbhd-eyebrow nbhd-headline-content__eyebrow">
    Vehicula Condimentum</div>
    <h2 class="nbhd-title nbhd-headline-content__title">Integer posuere erat a ante venenatis</h2>
    <h3 class="nbhd-subtitle nbhd-headline-content__subtitle">Pellentesque Lorem Etiam</h3>
    <div class="nbhd-content nbhd-headline-content__content">
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
    <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-headline-content__cta" href="#go-here" target="_blank" aria-label="Additional context for this link">Call to Action</a>
  </div>
</section>

Component Properties

Name Type Default Description
eyebrow string Short introductory content above the title.
title string Main content for headline title of component.
subtitle string Content for secondary title that is under title.
content string General content block below titles and above call to action.
ctaButton object Call to action link used on component to link to another page or section.
cssClass string Additional CSS class(es) to add to component.
componentID string ID attribute value for component.
componentTitleH1 boolean false Set the heading level for title to h1
componentCompact boolean false Enable compact styling.
componentFullWidth boolean false Enable the content area to be full width and left aligned.
componentMarginTop none | small | medium | large none Add additional margin above the component. Small = 24px, Medium = 48px, Large = 96px.
componentMarginBottom none | small | medium | large none Add additional margin below the component. Small = 24px, Medium = 48px, Large = 96px.
componentPaddingTop default | none | small | medium | large default Set the padding for the top of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the top padding styling for the component and use the default setting.
componentPaddingBottom default | none | small | medium | large default Set the padding for the bottom of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the bottom padding styling for the component and use the default setting.
componentBackground primary-light | primary-dark | secondary-light | secondary-dark primary-light Background theme color for component.
componentRenovation string The ability to alter and renovate the provided component CSS properties of the component.

CSS Properties

The following CSS Properties are available to update styling when provided with componentRenovation. It is ideal to use the default component styling and only leverage the componentRenovation feature in extreme cases. Refer to the Component Renovation guidelines on how to use. Remember...with great power, comes great responsibility!

Property Description
--nbhd-headline-content-background Controls the background styling.
--nbhd-headline-content-padding-block Controls the block padding for the overall component.
--nbhd-headline-content-margin-inline Controls the inline margin for component.
--nbhd-headline-content-max-width Controls the max width for the content area.
--nbhd-headline-content-min-width Controls the min width for the content area.
--nbhd-headline-content-text-align Controls the text alignment styling for the component.
--nbhd-headline-content--container--padding-inline Controls the inline padding for the container within the component.
--nbhd-headline-content--content--margin-inline Controls the inline margin for the content component.
--nbhd-headline-content--content--max-width Controls the max width for the content component.

Elements

This component contains the following elements and their associated CSS Properties.

Integration Status

CSS Sap Commerce React
ready
ready
unavailable