@piksl/box

@piksl/box

• <Box /> is a Styled Component that wraps the <div> HTML-element and provides properties to change the styling of the element. More information about the available properties can be found in the API description below.

API

Box

Prop	Description	Type	Default
display	Minimum height of the <Container />	inline, block, flex	-
justify	Sets the distribution of space between and around <Box /> children items.	flex-start, flex-end, center, space-between, space-around, space-evenly	-
align	Sets the destribution of space between and around <Box /> children items.	flex-start, flex-end, center	-
wrap	Defines whether the flex items are inside <Box /> are forced in a single line or can be flowed into multiple lines.	nowrap, wrap, wrap-reverse	nowrap
position	Sets how the <Box /> is positioned	static, relative, fixed, absolute, sticky	-
margin	Sets the margin area on sides of the <Box />	OffsetShorthandType	-
padding	Sets the padding area on sides of the <Box />	OffsetShorthandType	-
top	Determine the top location of positioned <Box />	string	-
right	Determine the right location of positioned <Box />	string	-
bottom	Determine the bottom location of positioned <Box />	string	-
left	Determine the left location of positioned <Box />	string	-
classname	The classname of the <Box />	string	-

Types

OffsetType

number | "auto"

OffsetShorthandType

[OffsetType, OffsetType, OffsetType, OffsetType] |
[OffsetType, OffsetType, OffsetType] |
[OffsetType, OffsetType] |
[OffsetType]