@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]