Newer
Older
<!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>
<h1>Helsinki University web components demo</h1>
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
<hy-process
variant="small"
class="hy-process-container"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step 1"},
{"heading":"Step title","description":"Step description text Step description text", "step":"Intermediate step 2"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step 3 "}]'
>
</hy-process>
<hy-process
variant="small"
class="hy-process-container"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"}]'
>
</hy-process>
<hy-process
variant="big"
class="hy-process-container"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step 1"},
{"heading":"Step title","description":"Step description text Step description text", "step":"Intermediate step 2"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step 3"}]'
>
</hy-process>
<hy-process
variant="big"
class="hy-process-container"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text"}]'
>
</hy-process>
<hy-cta-link-button
url="https://www.google.com"
link-content="CTA Link button two with an extremely long title that should be split in several rows"
aria-label=""
is-external="true"
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
</hy-cta-link-button>
<hy-section-container>
This is a Section Container
<hy-heading heading="h2" section="subsection">
Section Header
</hy-heading>
</hy-section-container>
<hy-section-container>
<hy-heading heading="h2" section="subsection">
Section Buttons
</hy-heading>
<hy-button icon="hy-icon-arrow-left">
Primary Arrow
</hy-button>
<hy-button state="disabled" icon="hy-icon-arrow-left">
Primary Arrow Disabled
</hy-button>
<hy-button variant="secondary" icon="hy-icon-arrow-left">
Outline Arrow
</hy-button>
<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">
Outline Arrow Disabled
</hy-button>
</hy-section-container>
<hy-grid-container>
<hy-cta-link-button
link-content="CTA Link button one"
aria-label="CTA Link button one"
url="https://www.google.com"
is-external="false"
>
</hy-cta-link-button>
<hy-cta-link-button
url="https://www.google.com"
link-content="CTA Link button two"
aria-label=""
is-external="true"
>
</hy-cta-link-button>
<hy-cta-link-button
url="https://www.google.com"
link-content="CTA Link button two with an extremely long title that should be split in several rows"
aria-label=""
is-external="true"
>
</hy-cta-link-button>
<hy-cta-liftup-image-text
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
main-url="https://www.google.com"
main-url-title="Standalone link"
main-url-aria-label="Standalone link internal"
main-url-is-external="false"
standalone-url="https://www.google.com"
standalone-url-title="CTA standalone URL example"
standalone-url-aria-label=""
standalone-url-is-external="false"
/>
<hy-button variant="secondary" url="https://google.com" size="large"> Call to the action!</hy-button>
</hy-grid-container>