Large process flow

In progress

Large process flow

Large process box is used to illustrate step-by-step processes and procedures with relatively complex information. The element consists of

1. a process phase title/text
2. x amount of numbered process steps and
3. a line connecting the different phases. Large process boxes can also include links.

Example

A process illustrated with steps

<hy-heading heading="h2" section="contentsection">
  A process illustrated with steps
</hy-heading>
<hy-large-process-flow
  data-items='[
    {"phaseTitle":"First phase title",
     "boxes": [
     {"heading": "Hanc ego cum teneam sententiam",
      "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
      "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"}]},
    {"heading": "Hanc ego cum teneam sententiam",
      "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
      "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
               {"label":"Link to  another page", "url": "https://helsinki.fi"}]},
     {"heading": "Hanc ego cum teneam sententiam",
      "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
     {"heading": "Hanc ego cum teneam sententiam",
      "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
      "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
               {"label":"Link to  another page", "url": "https://helsinki.fi"}]}
     ]
    },
    {"phaseTitle":"Second phase title",
     "boxes": [
     {"heading": "Hanc ego cum teneam sententiam",
      "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
      "links":[{"label":"Link to  another page", "url": "https://helsinki.fi"},
               {"label":"Link to  another page", "url": "https://helsinki.fi"}]}
     ]
    }
  ]'
>
</hy-large-process-flow>

Properties

Property	Attribute	Description	Type	Default
dataItems	data-items		ProcessFlowValue[] \| string	undefined

Dependencies

Depends on

• hy-heading
• hy-large-process-flow-phase