Photonix UI - React Components, Templates & Figma Design System

Container

Centers content with a maximum width.

Preview

Container (SM)

Usage

import { Container } from '@photonix/ultimate';

<Container maxWidth="md">
  Content goes here
</Container>

Component API

Container

Prop	Type	Default	Description
maxWidth	`ResponsiveValue<string \| number>`	`'full'`	Maximum width of the container
size	`ResponsiveValue<string \| number>`	`-`	Alias for maxWidth
fluid	`boolean`	`-`	Whether to take up 100% width (alias for maxWidth="full")
centerContent	`boolean`	`false`	Whether to center the content
padding	`ResponsiveValue<SpacingToken>`	`-`	Padding alias (px usually)
children	`React.ReactNode`	`-`	Children elements
p	`ResponsiveValue<SpacingToken>`	`-`	Padding on all sides
px	`ResponsiveValue<SpacingToken>`	`-`	Padding inline (left/right)
py	`ResponsiveValue<SpacingToken>`	`-`	Padding block (top/bottom)
pt	`ResponsiveValue<SpacingToken>`	`-`	Padding block start (top)
pb	`ResponsiveValue<SpacingToken>`	`-`	Padding block end (bottom)
pl	`ResponsiveValue<SpacingToken>`	`-`	Padding inline start (left)
pr	`ResponsiveValue<SpacingToken>`	`-`	Padding inline end (right)
m	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin on all sides
mx	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline (left/right)
my	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block (top/bottom)
mt	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block start (top)
mb	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin block end (bottom)
ml	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline start (left)
mr	`ResponsiveValue<SpacingToken \| "auto">`	`-`	Margin inline end (right)
display	`ResponsiveValue<DisplayValue>`	`-`	CSS display property
aspectRatio	`ResponsiveValue<string \| number>`	`-`	Aspect Ratio
flexDirection	`ResponsiveValue<FlexDirection>`	`-`	Flex direction
flexWrap	`ResponsiveValue<boolean \| FlexWrap>`	`-`	Flex wrap behavior
flex	`ResponsiveValue<string \| number>`	`-`	Shorthand for flex-grow, flex-shrink, flex-basis
flexGrow	`ResponsiveValue<number>`	`-`	Flex grow factor
flexShrink	`ResponsiveValue<number>`	`-`	Flex shrink factor
flexBasis	`ResponsiveValue<string \| number>`	`-`	Flex basis
order	`ResponsiveValue<number>`	`-`	Order
gap	`ResponsiveValue<SpacingToken>`	`-`	Gap between items
columnGap	`ResponsiveValue<SpacingToken>`	`-`	Column gap
rowGap	`ResponsiveValue<SpacingToken>`	`-`	Row gap
alignItems	`ResponsiveValue<AlignItems>`	`-`	Align items (cross axis)
alignContent	`ResponsiveValue<string>`	`-`	Align content (multiline)
alignSelf	`ResponsiveValue<AlignSelf>`	`-`	Align self
justifyContent	`ResponsiveValue<JustifyContent>`	`-`	Justify content (main axis)
justifyItems	`ResponsiveValue<string>`	`-`	Justify items (grid)
placeItems	`ResponsiveValue<string>`	`-`	Place items (align-items + justify-items)
placeContent	`ResponsiveValue<string>`	`-`	Place content (align-content + justify-content)
bg	`ResponsiveValue<BackgroundToken>`	`-`	Background color using public background tokens mapped to canonical surface vars
pageBg	`ResponsiveValue<PageBackgroundToken>`	`-`	Page background using canonical background-* vars for page/root containers
borderRadius	`ResponsiveValue<RadiusToken>`	`-`	Border radius using border-radius-* tokens
shadow	`ResponsiveValue<ShadowToken>`	`-`	Box shadow using shadow-* tokens
opacity	`ResponsiveValue<number>`	`-`	Opacity
border	`ResponsiveValue<string>`	`-`
borderWidth	`ResponsiveValue<number \| BorderWidthToken>`	`-`
borderStyle	`ResponsiveValue<string>`	`-`
borderColor	`ResponsiveValue<string>`	`-`
textAlign	`ResponsiveValue<TextAlign>`	`-`
fontSize	`ResponsiveValue<string \| number>`	`-`
fontWeight	`ResponsiveValue<string \| number>`	`-`
lineHeight	`ResponsiveValue<string \| number>`	`-`
color	`ResponsiveValue<string>`	`-`
w	`ResponsiveValue<string \| number>`	`-`	Width - accepts CSS value
h	`ResponsiveValue<string \| number>`	`-`	Height - accepts CSS value
minW	`ResponsiveValue<string \| number>`	`-`	Min width - accepts CSS value
minH	`ResponsiveValue<string \| number>`	`-`	Min height - accepts CSS value
maxW	`ResponsiveValue<string \| number>`	`-`	Max width - accepts CSS value
maxH	`ResponsiveValue<string \| number>`	`-`	Max height - accepts CSS value
position	`ResponsiveValue<Position>`	`-`	CSS position property
top	`ResponsiveValue<string \| number>`	`-`	Top position
right	`ResponsiveValue<string \| number>`	`-`	Right position
bottom	`ResponsiveValue<string \| number>`	`-`	Bottom position
left	`ResponsiveValue<string \| number>`	`-`	Left position
inset	`ResponsiveValue<string \| number>`	`-`	Inset shortcut
zIndex	`ResponsiveValue<number>`	`-`	Z-index
overflow	`ResponsiveValue<Overflow>`	`-`	CSS overflow property
overflowX	`ResponsiveValue<Overflow>`	`-`	CSS overflow-x property
overflowY	`ResponsiveValue<Overflow>`	`-`	CSS overflow-y property
cursor	`ResponsiveValue<string>`	`-`
pointerEvents	`ResponsiveValue<string>`	`-`
userSelect	`ResponsiveValue<string>`	`-`
transform	`ResponsiveValue<string>`	`-`
transition	`ResponsiveValue<string>`	`-`

Variants

Max Width Sizes

Containers come in various standard widths.

Max Width Sizes

<Container maxWidth="sm">SM</Container>
<Container maxWidth="md">MD</Container>
<Container maxWidth="lg">LG</Container>

Centered Content

Containers are centered by default.

Left Aligned

Centered

Centered Content

<Container centerContent={false}>Left Aligned</Container>
<Container>Centered (Default)</Container>

Responsive Container

Different max-widths for different breakpoints.

Responsive Width

Responsive Container

<Container maxWidth={{ base: 'sm', lg: 'xl' }}>
  Content
</Container>

Container

Preview

Component API

Container

Variants

Max Width Sizes

Centered Content

Responsive Container

On this page