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
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| maxWidth | the 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 |
| 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 |