Container

Align and pad content within a responsive fixed-width container

<Container>

import { Container } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
"form" | "label" | "span" | "a" | "article" | "div" | "header" | "li" | "main" | "section"
div
breakpoint
"sm" | "md" | "lg" | "xl"
-
display
ConditionalStyle<Values<("none" | "block" | "flex" | "grid" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flex
ConditionalStyle<Values<{ 1: "1 1 0%"; auto: "1 1 auto"; initial: "0 1 auto"; none: "none"; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexDirection
ConditionalStyle<Values<("column" | "row")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
fluid
boolean
false
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-

If you set the breakpoint prop, your container will remain at width: 100% until the specified breakpoint, at which it maintain a responsive max-width.

The fluid prop will set the container to width: 100% at all screen sizes, allowing you to maintain consistent padding throughout your app without restricting the size of the content.