Box
Box is the default layout component that implements sensitive flexbox defaults similar to React Native. It supports a couple of responsive props which means that it accepts either a single value or an array of values per breakpoint.
Box is a direct export of kilvin(new tab)'s Box(new tab).
Props
Name | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg | The CSS background color |
bg | array, string | A shorthand for backgroundColor |
Custom Props
Next to all kilvin props, it includes additional custom props:
- bg / backgroundColor
Baseline Grid
Box accepts a couple of properties that adhere to the baseline grid of 4 pixel.
That means the passed value will be multiplied by 4.
It affects the following props:
- padding
- paddingLeft
- paddingRight
- paddingTop
- paddingBottom
- paddingVertical
- paddingHorizontal
- margin
- marginLeft
- marginRight
- marginTop
- marginBottom
- marginVertical
- marginHorizontal
- space