# @elemental-ui-alpha/box

> The box primitive allows consumers to implement aesthetic changes within the constraints of the theme.

Latest version **0.0.2** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install @elemental-ui-alpha/box
pnpm add @elemental-ui-alpha/box
yarn add @elemental-ui-alpha/box
bun add @elemental-ui-alpha/box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-24 |
| First published | 2020-04-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 38.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dsf-release-bot, mitchellhamilton |

## Links

- npm: https://www.npmjs.com/package/@elemental-ui-alpha/box
- npm.io page: https://npm.io/package/@elemental-ui-alpha/box

## Dependencies (4)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.3
- [@elemental-ui-alpha/core](https://npm.io/package/@elemental-ui-alpha/core.md) ^0.0.2
- [@elemental-ui-alpha/theme](https://npm.io/package/@elemental-ui-alpha/theme.md) ^0.0.0
- [@elemental-ui-alpha/utils](https://npm.io/package/@elemental-ui-alpha/utils.md) ^0.0.2

## Recent versions

- 0.0.2 (latest) — 2020-04-24
- 0.0.1 — 2020-04-23
- 0.0.0 — 2020-04-23

## README

# Box

```jsx
import { Box } from '@elemental-ui-alpha/box';
```

## Style Props

### Background / Foreground

Target the `background` color and `foreground` color:

```jsx live
<Box background="shade" foreground="accent">
  accent
</Box>
```

### Padding

The padding keys allow targeting each side as well as the x-axis and y-axis.

- `padding`
- `paddingTop`
- `paddingRight`
- `paddingBottom`
- `paddingLeft`
- `paddingX` padding-left and padding-right
- `paddingY` padding-top and padding-bottom

```jsx live
<Box padding="medium" background="shade">
  padding
</Box>
```

### Margin

The margin keys allow targeting each side as well as the x-axis and y-axis.

- `margin`
- `marginTop`
- `marginRight`
- `marginBottom`
- `marginLeft`
- `marginX` margin-left and margin-right
- `marginY` margin-top and margin-bottom

```jsx live
<Box margin="medium" background="shade">
  margin
</Box>
```

### Rounding

The rounding keys allow targeting each box side.

- `rounding` border-radius
- `roundingBottom` border-bottom-left-radius and border-bottom-right-radius
- `roundingLeft` border-bottom-left-radius and border-top-left-radius
- `roundingRight` border-bottom-right-radius and border-top-right-radius
- `roundingTop` border-bottom-left-radius and border-bottom-right-radius

The rounding values don't follow the traditional t-shirt sizes.

- `none`
- `small`
- `medium`
- `large`

```jsx live
<Box rounding="small" background="shade">
  rounding
</Box>
```

### Text Align

Align the text within a box:

- `textAlign` text-align CSS property

The available values match the CSS property:

- `left`
- `right`
- `center`
- `justify`
- `start`
- `end`

```jsx live
<Box textAlign="center" padding="small" background="shade">
  centered text
</Box>
```

### Height

Set the height of a box:

- `height` height CSS property

```jsx live
<Box height={100} background="shade">
  100px tall
</Box>
```

### Width

Set the width of a box:

- `width` width CSS property

```jsx live
<Box width={200} background="shade">
  200px wide
</Box>
```

### Combined

Mix and match style properties to achieve the desired aesthetic.

```jsx live
<Box
  background="shade"
  foreground="action"
  paddingX="large"
  paddingY="medium"
  margin="small"
  rounding="small"
  width={200}
>
  combined
</Box>
```

## Responsive Props

Instead of manually managing media queries and adding nested style objects
throughout a code base, we offer a convenient shorthand syntax for adding
responsive styles with a mobile-first approach.

Each of the above style props accepts a value or array of values. To skip
certain breakpoints, you can pass `null` to any position in the array to avoid
generating unnecessary CSS.

While this approach has been widely adopted with great success, much like any
new idea, it can seem odd or off-putting at first. We recommend giving it a
chance.

```jsx live
<Box background="shade" padding={['small', null, 'medium', 'none', 'large']}>
  responsive props
</Box>
```

---
_Source: https://npm.io/package/@elemental-ui-alpha/box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._