Simple process flow

In progress

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 flow element 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.

Example

<hy-process
  class="hy-process-container"
  number-term="Step"
  data-items='[{"heading":"Step title","description":"Step description text"},
   {"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>

Properties

Property	Attribute	Description	Type	Default
dataItems	data-items	Data	ProcessFlowBoxValue[] \| string	undefined
numberTerm	number-term	Aria-label for number, for example Step	string	undefined

---

Helsinki University Design System