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-docs-container>
<hy-button icon="hy-icon-arrow-left" icon-right="hy-icon-arrow-right"
>Hello there!</hy-button
>
<hy-button
variant="secondary"
icon="hy-icon-arrow-left"
icon-right="hy-icon-arrow-right"
>Hello there!</hy-button
>
<hy-button
variant="outline"
icon="hy-icon-hy-logo"
icon-right="hy-icon-arrow-right"
>Hello there!</hy-button
></hy-baseline
>
<hy-baseline
><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-baseline
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
>
<hy-link
url="https://www.google.com"
text-content="Regular link"
aria-label="Regular link"
is-external="false"
>
</hy-link>
<hy-link
variant="within-paragraph"
text-content="Link within paragraph"
aria-label="Link within paragraph"
url="https://www.google.com"
is-external="true"
>
</hy-link>
</hy-docs-container>
</body>
</html>