# 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` | `'transparent'` |
| `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-accordion-container](../accordion-container)
- [hy-accordion-item](../accordion-item)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
- [hy-ingress](../ingress)
- [hy-key-figure-group](../hy-key-figure-group)
- [hy-key-highlight-group](../hy-key-highlight-group)
- [hy-link-box-list](../link-box-list)
- [hy-process-flow-box](../process-flow-box)
- [hy-shortcuts](../hy-shortcuts)
- [hy-two-columns](../hy-two-columns)

### Graph

```mermaid
graph TD;
  hy-accordion-container --> hy-box
  hy-accordion-item --> hy-box
  hy-adjacent-image-text --> hy-box
  hy-banner --> hy-box
  hy-ingress --> hy-box
  hy-key-figure-group --> hy-box
  hy-key-highlight-group --> hy-box
  hy-link-box-list --> hy-box
  hy-process-flow-box --> hy-box
  hy-shortcuts --> hy-box
  hy-two-columns --> hy-box
  style hy-box fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System