Content Block

Draft

Content Block is a layout container that wraps content within a constrained container and provides slots for an eyebrow, title, and subtitle alongside default content. It supports configurable background, margin, and padding settings, plus a compact option for adjusting spacing.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-content-block>
  <nbhd-text
    tag="h2"
    variant="title"
    slot="title"
    >Content Block Title</nbhd-text
  >

  <nbhd-text tag="div">
    <p>
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
      elit. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
      commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis,
      est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
      ullamcorper nulla non metus auctor fringilla.
    </p>
    <p>
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
      auctor fringilla. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget
      quam. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
    </p>
  </nbhd-text>
</nbhd-content-block>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const App = () => (
  <>
    <NbhdContentBlock>
      <NbhdText
        tag="h2"
        variant="title"
        slot="title">
        Content Block Title
      </NbhdText>

      <NbhdText tag="div">
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
          elit. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
          commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis
          mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
          elit. Donec ullamcorper nulla non metus auctor fringilla.
        </p>
        <p>
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non
          metus auctor fringilla. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in,
          egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur
          est at lobortis.
        </p>
      </NbhdText>
    </NbhdContentBlock>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`compact`	`compact`	`boolean`	`false`	Constrain the component to the compact max inline size for a tighter content layout.
`tag`	`tag`	`'div''section''article'`	`div`	Wrapper element. `article` and `section` add structure screen readers announce, so only use them when the content is a self-contained article or a named section.
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the surface theme used by the content block.
`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 eyebrow content rendered above the title when provided.
`title`	Optional title content rendered above the subtitle and default body content.
`subtitle`	Optional subtitle content rendered below the title and above the default content.
`(default)`	Primary body content rendered inside the component after the optional header slots.

CSS Parts

Name	Description
`base`	The main article wrapper for the content block.
`container`	The inner nbhd-container element that constrains the block content.
`slot-eyebrow`	The slot element for eyebrow content when the eyebrow slot is provided.
`slot-title`	The slot element for title content when the title slot is provided.
`slot-subtitle`	The slot element for subtitle content when the subtitle slot is provided.

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

CSS Properties

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

Dependencies

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

ContainerReady <nbhd-container>