Photonix

Box

The most basic layout primitive for styling and containment.

Preview

Box with padding="md"

Usage
import { Box } from '@photonix/ultimate';

<Box padding="md" style={{ backgroundColor: 'azure' }}>Content</Box>

Component API

Box

Prop
Type
Default
Description
display
ResponsiveValue<string>
-
CSS display property.
width, w
ResponsiveValue<string | number>
-
Width.
height, h
ResponsiveValue<string | number>
-
Height.
minWidth, minW
ResponsiveValue<string | number>
-
Min Width.
minHeight, minH
ResponsiveValue<string | number>
-
Min Height.
maxWidth, maxW
ResponsiveValue<string | number>
-
Max Width.
maxHeight, maxH
ResponsiveValue<string | number>
-
Max Height.
overflow
ResponsiveValue<string>
-
Overflow behavior.
position
ResponsiveValue<string>
-
Positioning.
zIndex
ResponsiveValue<number>
-
Z-Index.
top, right, bottom, left
ResponsiveValue<string | number>
-
Position offsets.
flex
ResponsiveValue<string | number>
-
Flex shorthand.
flexGrow
ResponsiveValue<number>
-
Flex grow factor.
flexShrink
ResponsiveValue<number>
-
Flex shrink factor.
flexBasis
ResponsiveValue<string | number>
-
Flex basis.
order
ResponsiveValue<number>
-
Order.
alignSelf
ResponsiveValue<string>
-
Alignment for this item.
p, padding
ResponsiveValue<SpacingToken>
-
Padding.
px, py
ResponsiveValue<SpacingToken>
-
Horizontal/Vertical Padding.
pt, pr, pb, pl
ResponsiveValue<SpacingToken>
-
Side Padding.
m, margin
ResponsiveValue<SpacingToken>
-
Margin.
mx, my
ResponsiveValue<SpacingToken>
-
Horizontal/Vertical Margin.
mt, mr, mb, ml
ResponsiveValue<SpacingToken>
-
Side Margin.
fontFamily
ResponsiveValue<string>
-
Font family.
fontSize
ResponsiveValue<string>
-
Font size.
fontWeight
ResponsiveValue<string | number>
-
Font weight.
lineHeight
ResponsiveValue<string | number>
-
Line height.
letterSpacing
ResponsiveValue<string>
-
Letter spacing.
textAlign
ResponsiveValue<string>
-
Text alignment.
color
ResponsiveValue<string>
-
Text color.
bg, backgroundColor
ResponsiveValue<string>
-
Background color.
borderRadius
ResponsiveValue<RadiusToken>
-
Border radius.
border
ResponsiveValue<string>
-
Border shorthand.
shadow
ResponsiveValue<ShadowToken>
-
Box shadow.
opacity
ResponsiveValue<number>
-
Opacity.
cursor
ResponsiveValue<string>
-
Cursor style.
userSelect
ResponsiveValue<string>
-
User select behavior.
pointerEvents
ResponsiveValue<string>
-
Pointer events.
transform
ResponsiveValue<string>
-
CSS transform property.
transition
ResponsiveValue<string>
-
CSS transition property.

Variants

Padding & Margin

Control spacing using padding and margin props.

Box with padding="lg"

Padding & Margin
<Box padding="lg" style={{ border: '1px dashed grey' }}>Padding LG</Box>

Background & Border

Apply background colors and borders using tokens.

Card-like Box with shadow

Background & Border
<Box bg="secondary" borderRadius="sm" p="md" shadow="sm">
  Card-like Box
</Box>

Responsive Styles

Visual properties also support responsive values.

Resize to see padding/bg/radius change

Responsive Styles
<Box
  p={{ base: 'sm', md: 'xl' }}
  bg={{ base: 'secondary', md: 'brand-primary' }}
  borderRadius={{ base: 'xs', md: 'lg' }}
>
  Resize window to see changes
</Box>

On this page

Preview
Component API
Variants
Padding & Margin
Background & Border