Newer
Older
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<link
rel="stylesheet"
type="text/css"
href="/build/hy-design-system-demo.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/hy-design-system-demo.esm.js"></script>
<script nomodule src="/build/hy-design-system-demo.js"></script>
</head>
<body>
<h1>Helsinki University web components demo</h1>
<hy-grid-container>
<hy-grid-row>
<hy-grid-item columns="6">
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
62
63
64
65
66
67
68
69
70
71
<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-item columnsSM="12">
<hy-accordion-container>
<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">
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.
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.
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 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</hy-accordion-item>
</hy-accordion-container>
</hy-grid-item>
<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>
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
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-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
aria-label="Regular link"
is-external="false"
>
</hy-link>
<hy-link
variant="within-paragraph"
aria-label="Link within paragraph"
url="https://www.google.com"
is-external="true"
>
</hy-link>
157
158
159
160
161
162
163
164
165
166
167
168
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
<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-row>
</hy-grid-container>