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-shortcuts
list-heading="Shortcuts list heading number one"
data-items='[
{"heading":"3500 h","url":"https://yle.fi"},
{"heading":"Example link label one","url":"https://yle.fi"},
{"heading":"Example link label two Very Long label indeed to test if it fits. Example link label two Very Long label indeed to test if it fits", "url":"https://yle.fi"},
{"heading":"Example link label three", "url":"https://yle.fi"}]'
>
</hy-shortcuts>
<section>
<a href="#this-is-an-accordion-item-3--title">Click here to go to Accordion Item 3</a>
</section>
<hy-shortcuts
list-heading="Shortcuts list heading number two"
data-items='[
{"heading":"Example link label one","url":"https://yle.fi"},
{"heading":"Example link label two Very Long label indeed to test if it fits", "url":"https://yle.fi"},
{"heading":"Example link label three", "url":"https://yle.fi"}]'
>
</hy-shortcuts>
<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>