Newer
Older
# hy-box
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
| `align` | `align` | value for vertical alignment (align-items) | `string` | `'baseline'` |
| `bg` | `bg` | background color. Must use one of css variable names from color tokens | `string` | `undefined` |
| `h` | `h` | fixed height for the container, useful for extra spacing containers | `number` | `undefined` |
| `justify` | `justify` | Value for horisontal alignment (justify-content) | `string` | `'flex-start'` |
| `p` | `p` | All sides padding value in rems. Responsive when given Comma separated values. | `string` | `undefined` |
| `pb` | `pb` | Bottom padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
| `pl` | `pl` | Left padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
| `pr` | `pr` | Right padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
| `pt` | `pt` | Top padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
| `width` | `width` | Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value. | `string` | `'100'` |
## Dependencies
### Used by
- [hy-banner](../hy-banner)
### Graph
```mermaid
graph TD;
hy-banner --> hy-box
style hy-box fill:#f9f,stroke:#333,stroke-width:4px
```