Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
---
title: Process flow step
sidebar: true
sidebarDepth: 2
---
# Process flow step
Process flow step
## Usage
<hy-process-flow-box class="box"
variant="small"
box-number="1"
box-title="Step title"
box-description="Step description"
intermediate-step-title="Next step"
step-state="first"
/>
```
<hy-process-flow-box class="box"
variant="small"
box-number="1"
box-title="Step title"
box-description="Step description"
intermediate-step-title="Next step"
step-state="first"
/>
```
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------------- | ------------------------- | ----------- | ---------------------------------------------------------------- | -------------------------------- |
| `boxDescription` | `box-description` | | `string` | `undefined` |
| `boxNumber` | `box-number` | | `string` | `undefined` |
| `boxTitle` | `box-title` | | `string` | `undefined` |
| `intermediateStepTitle` | `intermediate-step-title` | | `string` | `""` |
| `numberTerm` | `number-term` | | `string` | `"Vaihe"` |
| `stepState` | `step-state` | | `"default" \| "first"` | `"default"` |
| `variant` | `variant` | | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |
## Dependencies
### Used by
- [hy-process](../process)
### Graph
```mermaid
graph TD;
hy-process --> hy-process-flow-box
style hy-process-flow-box fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
Helsinki University Design System