<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/build/huds-lib.css" />
<link rel="stylesheet" type="text/css" href="/fonts/fonts.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/huds-lib.esm.js"></script>
<script nomodule src="/build/huds-lib.js"></script>
</head>
<body class="full-width">
<hy-heading heading="h1" mode="default">Heading 1 overridden to default</hy-heading>
<hy-heading heading="h1">Heading 1, but take full-width style</hy-heading>
<hy-process
variant="small"
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>
<hy-process
variant="big"
class="hy-process-container"
number-term="Phase"
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"}]'
>
</hy-process>
</body>
</html>