Container
Align and pad content within a responsive fixed-width container
<Container>Hello world</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<("flex" | "grid" | "none" | "block" | "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.
<Container breakpoint="md">100% width until I reach the "md" breakpoint</Container>
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.
<Container fluid>I take up the full width</Container>