Container
ready
Container is a layout wrapper component that provides max-width constraint and padding.
Example
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 |
|---|---|---|---|---|
surface
|
surface
|
none | primary | secondary | inverse | inverse-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. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-container-host-display
|
block |
--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-size-container-max, 1300px) |
--nbhd-container-minInlineSize
|
var(--nbhd-size-container-min, 320px) |
--nbhd-container-paddingBlock
|
var(--nbhd-spacing-0, 0) |
--nbhd-container-paddingInline
|
var(--nbhd-base-space-6, 16px) |
--nbhd-container-position
|
static |
--nbhd-container-paddingInline-bpMd
|
var(--nbhd-base-space-12, 48px) |
--nbhd-container-paddingInline-bpLg
|
var(--nbhd-base-space-12, 48px) |
Breakpoint specific properties will fallback to the previous breakpoint(s) and then fallback to the default value if nothing is defined.