Skip to main content
Design system

Container

The container centers your content horizontally. It's the most basic layout element.

Bundle size: 829 Bytes
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Container } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

Anatomy

The anatomy of a container has no visual elements. It is an empty container used for layout and is tied to our breakpoints.


Options

Max width

Determine the max width of the container. The container width grows with the size of the screen. Set the container width to fluid for a full width container.


API Reference

Container

PropDescriptionTypeDefaultRequired
maxWidththe max width of them all
"sm" | "md" | "lg" | "xl" | "fluid" | ({ "@notSm"?: "sm" | "md" | "lg" | "xl" | "fluid"; "@notMd"?: "sm" | "md" | "lg" | "xl" | "fluid"; "@notLg"?: "sm" | "md" | "lg" | "xl" | "fluid"; "@notXl"?: "sm" | ... 3 more ... | "fluid"; ... 20 more ...; "@initial"?: "sm" | ... 3 more ... | "fluid"; } & { ...; })
----False
asWPDS provides an as prop for changing which tag a component outputs.
never
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...
----False
Edit this page on GitHub.