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.

Example

icon-storybook-default View 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 Constrain the component to the compact max inline size for a tighter content layout.
surface surface none | primary | secondary | inverse | inverse-secondary primary Sets the surface theme used by the content block.
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 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.

CSS Properties

Property Default Value
--nbhd-contentBlock-host-display block
--nbhd-contentBlock-inlineSize 100%
--nbhd-contentBlock-marginInline auto
--nbhd-contentBlock-maxInlineSize 100% (compact: var(--nbhd-size-container-max))
--nbhd-contentBlock-minInlineSize var(--nbhd-size-container-min, 320px)
--nbhd-contentBlock-paddingBlock var(--nbhd-base-space-10, 40px) var(--nbhd-base-space-12, 48px)
--nbhd-contentBlock-paddingInline var(--nbhd-base-space-0, 0)
--nbhd-contentBlock-textAlign start

Dependencies

This component contains the following components as dependencies.