WPDS - Container | Components

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.


Open in Playroom

API Reference

Container

Prop	Description	Type	Default	Required
maxWidth	the max width of them all	enum fluid \| sm \| md \| lg \| xl	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	False
css	WPDS 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