Container

Ready

Container is a layout wrapper component that provides max-width constraint and padding.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

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

Usage

<nbhd-container> [content/components] </nbhd-container>

Install

npm install @fbin-web/neighborhood-react

Import

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

Usage

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

const App = () => (
  <>
    <NbhdContainer>[content/components]</NbhdContainer>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`none`	The surface theme of the container.

Slots

Name	Description
`(default)`	The default slot content rendered inside the container wrapper.

CSS Parts

Name	Description
`base`	The container wrapper element that holds the slotted content.

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

CSS Properties

Set these on nbhd-container 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-container-bpLg-paddingInline`	`--nbhd-container-bpMd-paddingInline`	`48px`
`--nbhd-container-bpMd-paddingInline`	`--nbhd-space-12`	`48px`
`--nbhd-container-display`	—	`block`
`--nbhd-container-host-display`	—	`block`
`--nbhd-container-inlineSize`	—	`100%`
`--nbhd-container-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-container-marginInline`	—	`auto`
`--nbhd-container-maxInlineSize`	`--nbhd-size-container-max`	`1300px`
`--nbhd-container-minInlineSize`	`--nbhd-size-container-min`	`320px`
`--nbhd-container-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-container-paddingInline`	`--nbhd-space-6`	`24px`
`--nbhd-container-position`	—	`static`

Dependencies

Used by

Card ListReady <nbhd-card-list> CarouselDraft <nbhd-carousel> Content BlockDraft <nbhd-content-block> Headline ContentReady <nbhd-headline-content> Hero SplitReady <nbhd-hero-split> HumongotronReady <nbhd-humongotron> JumbotronReady <nbhd-jumbotron> MinitronReady <nbhd-minitron> Pagination SearchReady <nbhd-pagination-search>