Container
Align and pad content within a responsive fixed-width container
PropsLink to this heading
Link to this heading
<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; }; }>> | - |
BreakpointLink to this heading
Link to this heading
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.
FluidLink to this heading
Link to this heading
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.