readme.md

# 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`     |
| `headerstyle` | `headerstyle` |                                                                                                                           | `string` | `'common'`      |
| `justify`     | `justify`     | Value for horisontal alignment (justify-content)                                                                          | `string` | `'flex-start'`  |
| `m`           | `m`           | All sides margin value in rems. Responsive when given Comma separated values.                                             | `string` | `undefined`     |
| `mb`          | `mb`          | Bottom margin in rems. Responsive when given Comma separated values.                                                      | `string` | `undefined`     |
| `ml`          | `ml`          | Left margin in rems. Responsive when given Comma separated values.                                                        | `string` | `undefined`     |
| `mr`          | `mr`          | Right margin in rems. Responsive when given Comma separated values.                                                       | `string` | `undefined`     |
| `mt`          | `mt`          | Top margin in rems. Responsive when given Comma separated values.                                                         | `string` | `undefined`     |
| `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-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
- [hy-heading](../heading)
- [hy-hero](../hy-hero)
- [hy-image](../image)
- [hy-introduction](../hy-introduction)
- [hy-key-figure-group](../hy-key-figure-group)
- [hy-link-box-list](../link-box-list)
- [hy-paragraph-text](../paragraph-text)
- [hy-process-flow-box](../process-flow-box)
- [hy-shortcuts](../hy-shortcuts)
- [hy-table-container](../hy-table-container)
- [hy-tabs](../hy-tabs)
- [hy-video](../hy-video)

### Graph

```mermaid
graph TD;
  hy-accordion-container --> hy-box
  hy-adjacent-image-text --> hy-box
  hy-banner --> hy-box
  hy-heading --> hy-box
  hy-hero --> hy-box
  hy-image --> hy-box
  hy-introduction --> hy-box
  hy-key-figure-group --> hy-box
  hy-link-box-list --> hy-box
  hy-paragraph-text --> hy-box
  hy-process-flow-box --> hy-box
  hy-shortcuts --> hy-box
  hy-table-container --> hy-box
  hy-tabs --> hy-box
  hy-video --> hy-box
  style hy-box fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System