<!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> <hy-baseline margin="2"> <hy-box p="0.5" width="100, 50, 67"> <hy-box p="1" bg="grayscale-medium" justify="center"> <hy-paragraph-text>wide</hy-paragraph-text> </hy-box> </hy-box> </hy-baseline> <script> const el = document.querySelector('hy-box'); </script> <hy-grid-container> <hy-cta-link-button link-content="CTA Link button one" sc-label="CTA Link button one" url="https://www.google.com" is-external="false" > </hy-cta-link-button> <hy-cta-liftup-image-text image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs" text-title="Text title 2" text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit." 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="" standalone-url-is-external="false" /> <hy-button variant="secondary" url="https://google.com" size="large"> Call to the action!</hy-button> </hy-grid-container> </body> </html>