readme.md

---
title: Process flow
sidebar: true
---

# Process flow

Process flow

Design system contains two separate ways of displaying a process. When the descriptive content is short, it’s best to use this simple version.
This process consists of boxes that have

1. A number showing the order. This is generated automatically and is not optional
2. Title and description
3. Optional arrow element to emphasize visual flow and to add more information when needed.

## Usage

<hy-process variant="small"
  class="hy-process-container"
            data-items='[{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'>
</hy-process>

```
<hy-process variant="small"
  class="hy-process-container"
            data-items='[{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
   {"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'>
</hy-process>
```

<!-- Auto Generated Below -->

## Properties

| Property     | Attribute     | Description | Type                                                             | Default                          |
| ------------ | ------------- | ----------- | ---------------------------------------------------------------- | -------------------------------- |
| `dataItems`  | `data-items`  |             | `ProcessFlowBoxValue[] \| string`                                | `undefined`                      |
| `numberTerm` | `number-term` |             | `string`                                                         | `undefined`                      |
| `variant`    | `variant`     |             | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |

## Dependencies

### Depends on

- [hy-process-flow-box](../process-flow-box)

### Graph

```mermaid
graph TD;
  hy-process --> hy-process-flow-box
  style hy-process fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System