Container
ready
Container is a layout wrapper component that provides max-width constraint and padding.
Loading
Code
HTML
import { NbhdContainer } from '@fbin-web/neighborhood-core';<nbhd-container> [content/components] </nbhd-container>React
import { NbhdContainer } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdContainer>[content/components]</NbhdContainer>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
breakpoint
|
breakpoint
|
string
|
Optional breakpoint identifier for the container. |
Slots
| Name | Description |
|---|---|
| (default) | The content to be wrapped within the container. |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-container-display
|
block |
--nbhd-container-inlineSize
|
100% |
--nbhd-container-marginBlock
|
var(--nbhd-spacing-0, 0) |
--nbhd-container-marginInline
|
var(--nbhd-spacing-auto, auto) |
--nbhd-container-maxInlineSize
|
var(--nbhd-maxInlineSize, 1300px) |
--nbhd-container-minInlineSize
|
var(--nbhd-minInlineSize, 320px) |
--nbhd-container-paddingBlock
|
var(--nbhd-spacing-0, 0) |
--nbhd-container-paddingInline
|
var(--nbhd-space-6, 16px) |
--nbhd-container-position
|
static |
--nbhd-container-paddingInline-bpMd
|
var(--nbhd-space-12, 48px) |
--nbhd-container-paddingInline-bpLg
|
var(--nbhd-space-12, 48px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.