Box

Box is a general-purpose container with sx-like shorthand attributes that map directly to CSS properties.

Basic

A box with background, color, padding and border-radius attributes.

<me-box bgcolor="var(--me-palette-primary-main)" color="white" p="16px" border-radius="8px"> content </me-box>

Flex Layout

Item 1

Item 2

Item 3

<me-box display="flex" gap="8px" align-items="center"> <me-box bgcolor="..." p="8px 16px">Item 1</me-box> <me-box bgcolor="..." p="8px 16px">Item 2</me-box> </me-box>

Spacing Shorthands

Single-letter shorthands work for padding (p, pt, pr, pb, pl) and margin (m, mt, mr, mb, ml).

pt=32px, pb=32px, pl=16px, pr=16px

<me-box pt="32px" pb="32px" pl="16px" pr="16px">...</me-box>

API

Attribute	CSS Property	Description
`display`	display	display value.
`flex-direction`	flex-direction	—
`justify-content`	justify-content	—
`align-items`	align-items	—
`gap`	gap	—
`bgcolor`	background-color	Background color.
`color`	color	Text color.
`p` / `padding`	padding	Padding shorthand.
`pt` / `pr` / `pb` / `pl`	padding-top/right/bottom/left	Per-side padding.
`m` / `margin`	margin	Margin shorthand.
`mt` / `mr` / `mb` / `ml`	margin-top/right/bottom/left	Per-side margin.
`width` / `height`	width / height	Size.
`border-radius`	border-radius	—
`overflow`	overflow	—
`position`	position	—
`z-index`	z-index	—