<!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>
<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
is-demo
menu-type="sidenav"
menu-link-id="26"
url="#"
label="Services for researchers and research policy"
in-active-trail="true"
is-active="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
is-demo
menu-type="sidenav"
menu-link-id="28"
url="#"
label="Research infrastructure development programme"
></hy-menu-item>
</hy-menu-level-container>
</hy-menu-item>
<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>
<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>
</aside>
</hy-main>
<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>
<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>
<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>
</body>
</html>