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