# Box

The `<Box>` tag is a special type of block-level element, which acts as a configurable container, as well as a child element of Layouts, or Collections defining a specific item in the defined layout that inherits properties from its parent.

```jsx
<Box dataRef={content.textBox} className="text-box" enableTextAlignment={true}>
...
</Box>
```

## Attributes

* **dataRef**: DataLocator - the data-element storing the Box's configuration
* **className**: string (optional) - a hard-coded class name to add to the rendered element
* **defaultBackgroundColor**: string (optional) - A CSS color value indicating the default background color.
* **defaultMaxWidth**: number (optional) - A number indicating the default max width in px of this box (Default: 1200)
* **defaultPaddingTop**: number (optional) - A number from 0-10 indicating the default top padding of this Box (Default 8)
* **defaultPaddingRight**: number (optional) - A number from 0-10 indicating the default right padding of this Box (Default 2)
* **defaultPaddingBottom**: number (optional) - A number from 0-10 indicating the default bottom padding of this Box (Default 8)
* **defaultPaddingLeft**: number (optional) - A number from 0-10 indicating the default left padding of this Box (Default 2)
* **enableTextAlignment**: boolean (optional) - When true, allows the user to select alignment
* **defaultTextAlignment**: string (optional) - A string ("left", "right", or "center") indicating the default alignment of this box (Default "center')
* **enableVerticalAlignment**: boolean (optional) - When true, allows the user to select the vertical alignment for the text inside the box
* **defaultVerticalAlignment**: string (optional) - A string ("left", "right", or "middle") indicating the vertical alignment for the text inside the box (Default "middle')
* **properties**: Array<\[object]> (optional) - defines properties that content authors can configure within the page editor. For details see [custom properties](https://developer.unstack.com/docs/features/properties).