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>
<h1>Helsinki University web components demo</h1>
<hy-section-container>
This is a Section Container
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>
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<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>
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
159
160
<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>
</hy-grid-row>
<hy-grid-row>
<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-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-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>
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>
<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-grid-item columns="8" columnsLg="10" columnsSm="6">
<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
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
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
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
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
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
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
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>