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.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdContentBlock } from '@fbin-web/neighborhood-core';
<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>

React 

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 Set the component max-inline-size to --nbhd-maxInlineSize
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

Slots

Name Description
eyebrow Eyebrow content placement.
title Title content placement.
subtitle Subtitle content placement.
(default) Default content area.

CSS Parts

Name Description
base The component's base wrapper.
container The inner nbhd-container wrapper.
slot-eyebrow The named slot for eyebrow content.
slot-title The named slot for title content.
slot-subtitle The named slot for subtitle content.

CSS Properties

Property Default Value
--nbhd-contentBlock-inlineSize 100%
--nbhd-contentBlock-marginInline var(--nbhd-space-auto, auto)
--nbhd-contentBlock-maxInlineSize 100%
--nbhd-contentBlock-minInlineSize var(--nbhd-minInlineSize, 320px)
--nbhd-contentBlock-paddingBlock var(--nbhd-space-10, 40px) var(--nbhd-space-12, 48px)
--nbhd-contentBlock-paddingInline var(--nbhd-space-0, 0)
--nbhd-contentBlock-textAlign start

Dependencies

This component contains the following components as dependencies.