Newer
Older
<!DOCTYPE html>
<html dir="ltr" lang="en">
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>
<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-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>
Ekaterina Kondareva
committed
<hy-heading heading="h2" section="subsection">This is subsection heading with 2 hy-image</hy-heading>
<hy-grid-row>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
<hy-image
image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
image-alt="Test image"
aspect-ratio-width=4
aspect-ratio-height=3
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
</hy-image>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
<hy-image
image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
image-alt="Test image"
aspect-ratio-width=4
aspect-ratio-height=3
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
</hy-image>
</hy-grid-item>
</hy-grid-row>
<hy-heading heading="h2" section="subsection">This is subsection with CTA Liftups with long text</hy-heading>
<hy-cta-liftup-image-text
Ekaterina Kondareva
committed
image-url="https://www.thoughtco.com/thmb/RcIcuFN8dnv51kK7v5KJ2crJaXg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/wu-tao-chishang-lunch-box-151892250-5b310f7dfa6bcc003663ad19.jpg"
text-title="Text title 2"
Ekaterina Kondareva
committed
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea dictumst."
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=""
>
</hy-cta-liftup-image-text>
Ekaterina Kondareva
committed
<hy-heading heading="h2" section="subsection">This is subsection with CTA Liftups.</hy-heading>
<hy-cta-liftup-image-text
image-right="true"
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
standalone-url="https://www.google.com"
standalone-url-title="CTA standalone URL example"
standalone-url-aria-label=""
standalone-url-is-external="true">
</hy-cta-liftup-image-text>
<hy-cta-liftup-image-text
image-right="false"
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
text-title="Search for Educational Program"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
standalone-url="https://www.google.com"
standalone-url-title="CTA standalone URL example"
standalone-url-aria-label=""
standalone-url-is-external="false"
standalone-url-2="https://www.google.com"
standalone-url-title-2="Another additional link"
standalone-url-aria-label-2=""
standalone-url-is-external-2="false">
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<hy-grid-row>
<hy-grid-item columns="6">
<hy-row>
<hy-button>
Primary
</hy-button>
<hy-button icon-right="hy-icon-arrow-right">
Primary Arrow
</hy-button>
<hy-button state="disabled">
Primary Disabled
</hy-button>
<hy-button state="disabled" icon-right="hy-icon-arrow-right">
Login Primary Arrow Disabled
</hy-button>
</hy-row>
<hy-row>
<hy-button variant="secondary">
Secondary
</hy-button>
<hy-button icon-right="hy-icon-arrow-right" variant="secondary">
Secondary Arrow
</hy-button>
<hy-button state="disabled" variant="secondary">
Secondary Disabled
</hy-button>
<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">
Secondary Arrow Disabled
</hy-button>
</hy-row>
</hy-grid-item>
<hy-grid-item columns="6">
<hy-heading heading="h1">This is a Heading 1</hy-heading>
<hy-heading heading="h2">This is a Heading 2</hy-heading>
<hy-heading heading="h3">This is a Heading 3</hy-heading>
<hy-heading heading="h4">This is a Heading 4</hy-heading>
<hy-heading heading="h5">This is a Heading 5</hy-heading>
<hy-heading heading="h6">This is a Heading 6</hy-heading>
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item>
<hy-heading heading="h2" section="subsection">This is subsection heading that has divider</hy-heading>
Secondary Arrow Disabled
</hy-button>
</hy-row>
</hy-grid-item>
<hy-grid-item columns="6">
<hy-heading heading="h1">This is a Heading 1</hy-heading>
<hy-heading heading="h2">This is a Heading 2</hy-heading>
<hy-heading heading="h3">This is a Heading 3</hy-heading>
<hy-heading heading="h4">This is a Heading 4</hy-heading>
<hy-heading heading="h5">This is a Heading 5</hy-heading>
<hy-heading heading="h6">This is a Heading 6</hy-heading>
</hy-grid-item>
<hy-accordion-item accordiontitle="This is accordion item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet
orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius
consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur
bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus
vel suscipit ligula.
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 2">
<hy-grid-container>
<hy-grid-row>
<hy-grid-item columnsSm="12">
<hy-heading heading="h3">Lorem ipsum Heading</hy-heading>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit
amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius
consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc
consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper
maximus vel suscipit ligula.
<hy-grid-item columns="12">
<hy-heading heading="h4" section="subsection">Divider heading</hy-heading>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit
amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius
consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc
consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper
maximus vel suscipit ligula.
<hy-link-box text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="6">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image" text-title="Text title"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="true"></hy-link-box>
Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit
amet orci.
Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius
consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc
consectetur bibendum.
Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper
maximus vel suscipit ligula.
</hy-grid-item>
</hy-grid-row>
</hy-grid-container>
</hy-accordion-item>
<hy-accordion-item accordiontitle="This is accordion item 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</hy-accordion-item>
</hy-accordion-container>
</hy-docs-container>
<hy-grid-row>
<hy-grid-item>
<hy-heading heading="h2" section="subsection">This is subsection heading that has divider</hy-heading>
</hy-grid-item>
</hy-grid-row>
<hy-ingress>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est
id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra
at, cursus sit amet orci
</hy-ingress>
<hy-paragraph-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est
id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra
at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam
elementum malesuada ante, quis facilisis arcu varius consectetur.
Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut
eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac
lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper
maximus vel suscipit ligula. In hac habitasse platea dictumst.
</hy-paragraph-text>
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
<hy-link url="https://www.google.com" link-content="Regular link" aria-label="Regular link" is-external="false">
</hy-link>
<hy-link variant="within-paragraph" link-content="Link within paragraph" aria-label="Link within paragraph"
url="https://www.google.com" is-external="true">
</hy-link>
<hy-standalone-link link-content="Standalone link" aria-label="Standalone link internal"
url="https://www.google.com" is-external="false">
</hy-standalone-link>
<hy-standalone-link url="https://www.google.com" link-content="Standalone link" aria-label="Standalone link external"
is-external="true">
</hy-standalone-link>
<hy-standalone-link url="https://www.google.com" link-content="Standalone link"
aria-label="Standalone link disabled internal"
is-external="false" is-enabled="false">
</hy-standalone-link>
<hy-standalone-link url="https://www.google.com" link-content="Standalone link"
aria-label="Standalone link disabled internal"
is-external="true" is-enabled="false">
</hy-standalone-link>
<hy-standalone-link url="https://www.google.com" link-content="Standalone link with enormously long text"
aria-label="Standalone link extra long text"
is-external="false">
</hy-standalone-link>
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<hy-heading heading="h3">Grid things</hy-heading>
<hy-grid-row>
<hy-grid-item columns="4" columnsLg="2" columnsSm="6">
<hy-paragraph-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in
est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
pharetra at, cursus sit amet orci. Aenean in pulvinar mi.
</hy-paragraph-text>
</hy-grid-item>
<hy-grid-item columns="8" columnsLg="10" columnsSm="6">
<hy-grid-row>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="right">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="right">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
<hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
<hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</hy-tiny-text>
</hy-grid-item>
</hy-grid-row>
</hy-grid-item>
<hy-grid-item columns="12">
<hy-accordion-container accordionid="example-2">
<hy-accordion-item accordiontitle="This is accordion item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</hy-accordion-item>
</hy-accordion-container>
</hy-grid-item>
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image" text-title="Text title"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="true"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
image-alt="Test image 2" text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box text-title="Text title with longer title and no description"
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
image-alt="Test image 2" text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
image-alt="Test image 2" text-title="Text title with image and no description"
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="3" columnsLg="3">
<hy-link-box text-title="Text title 2"
text-description="<p>asdfsaf</p> <p>asdf<s>hjka</s>df</p> <p>asdffsadfasdfsadf</p>"
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columnsSm="12" columns="6" columnsLg="4">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image" text-title="Text title"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="true"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="4">
<hy-link-box
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/hy_yhteishaku2020_nostokuva_herokuva_uusi_3.jpg?itok=Oae0xaQR"
image-alt="Test image 2"
text-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet"
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="6" columnsLg="4">
<hy-link-box text-title="Text title 2"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.google.com" aria-label="Link to google" is-external="false"></hy-link-box>
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columnsSm="12" columns="4" columnsLg="4">
<hy-image
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image"
aspect-ratio-width=4
aspect-ratio-height=3
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
</hy-grid-item>
<hy-grid-item columnsSm="12" columns="4" columnsLg="4">
<hy-image
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image"
aspect-ratio-width=16
aspect-ratio-height=9
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
</hy-grid-item>
</hy-grid-row>
<hy-grid-row>
<hy-grid-item columnsSm="12" columns="6" columnsLg="4">
<hy-heading heading="h3">The end</hy-heading>
</hy-grid-item>
</hy-grid-row>