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 class="full-width" style="padding: 0; margin: 0;">
<hy-main has-sidebar="true">
<div class="layout-content"></div>
<aside class="layout-sidebar-first" role="complementary">
<hy-menu
slot="menu"
menu-type="sidenav"
open="true"
is-demo="true"
data-menu-language='[
{"langCode":"fi","abbr":"fin","label":"Finnish","url":"/fi"},
{"langCode":"en","abbr":"eng","label":"English","url":"/en","isActive":"true"},
{"langCode":"sv","abbr":"swe","label":"Swedish","url":"/sv"}
]'
data-menu-donate='[{"url":"#","label":"Support us"}]'
>
<hy-menu-level-container menu-type="sidenav" menu-level="1">
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="1" url="#" label="News">
<hy-menu-level-container menu-type="sidenav" menu-level="2">
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="2" url="#" label="News"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="3" url="#" label="Events"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="4" url="#" label="Think Corner"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="5" url="#" label="Unitube"></hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="6" url="#" label="Research" in-active-trail="true">
<hy-menu-level-container menu-type="sidenav" menu-level="2">
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="7" url="#" label="Top research"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="15" url="#" label="Researchers"></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="16"
url="#"
label="Fields of science"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="17"
url="#"
label="Research groups"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="18"
url="#"
label="Doctoral education"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="24"
url="#"
label="Research institutes"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="25"
url="#"
label="Research stations"
></hy-menu-item>
<hy-menu-item
menu-link-id="26"
url="#"
label="Services for researchers and research policy"
in-active-trail="true"
<hy-menu-level-container menu-type="sidenav" menu-level="3">
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="27"
url="#"
label="Research infrastructures"
>
<hy-menu-level-container menu-type="sidenav" menu-level="4">
<hy-menu-item
menu-link-id="28"
url="#"
label="Research infrastructure development programme"
></hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="29"
url="#"
label="Research funding"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="30"
url="#"
label="Data management"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="35"
url="#"
label="Open science"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="39"
url="#"
label="Commercialisation of research"
></hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="45" url="#" label="Admissions"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="46" url="#" label="Cooperation"></hy-menu-item>
<hy-menu-item is-demo menu-type="sidenav" menu-link-id="47" url="#" label="About us"></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="48"
menu-item-alternative="true"
url="#"
label="Faculties and units"
>
<hy-menu-level-container menu-type="sidenav" menu-level="2">
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="49"
url="#"
label="Faculty of Agriculture and Forestry"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="50"
url="#"
label="Faculty of Arts"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="51"
url="#"
label="Faculty of Biological and Environmental Sciences"
></hy-menu-item>
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="52"
url="#"
label="Faculty of Educational Sciences"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="53"
url="#"
label="Faculty of Law"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="54"
url="#"
label="Faculty of Medicine"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="55"
url="#"
label="Faculty of Pharmacy"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="56"
url="#"
label="Faculty of Science"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="57"
url="#"
label="Faculty of Social Sciences"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="58"
url="#"
label="Faculty of Theology"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="59"
url="#"
label="Faculty of Veterinary Medicine"
></hy-menu-item>
<hy-menu-item
is-demo
menu-type="sidenav"
menu-link-id="50"
url="#"
label="Swedish School of Social Science"
></hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
</hy-menu-level-container>
</hy-menu>
Ekaterina Kondareva
committed
<section>
<a href="#facebook_ads_example">Click here to see an example of how a company uses Facebook ads.</a>
</section>
<section>
<a href="#this-is-an-accordion-item-3--title">Click here to go to Accordion Item 3</a>
</section>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
>
</hy-banner>
<section>
<a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
</section>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
>
</hy-banner>
<section>
<a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
</section>
Ekaterina Kondareva
committed
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
Ekaterina Kondareva
committed
url-title="Show list of conferences"
sc-label="List of conferences"
>
</hy-banner>
<hy-accordion-container accordionId="example-accordion">
<hy-accordion-item accordiontitle="This is an accordion item 1">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is an accordion item 2">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is an accordion item 3">
<hy-paragraph-text>Accordion content</hy-paragraph-text>
</hy-accordion-item>
</hy-accordion-container>
<hy-key-figure-group
data-items='[{"heading":"3500 h","description":"Opetusta annettiin Helsingin yliopistossa vuonna 2019"},
{"heading":"87%","description":"Hakijoista valitsi Helsingin yliopiston ensisijaiseksi vaihtoehdoksi."},
{"heading":"4/5","description":"Key Highlight description text updated"}]'
>
</hy-key-figure-group>
<a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>