diff --git a/dist/collection/components/accordion-container/accordion-container.css b/dist/collection/components/accordion-container/accordion-container.css
deleted file mode 100644
index 6d2b766be0d4e49de7e2ea9cfaa61039f7667364..0000000000000000000000000000000000000000
--- a/dist/collection/components/accordion-container/accordion-container.css
+++ /dev/null
@@ -1,43 +0,0 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --grayscale-white: #fff;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-black: #000000;
-  --additional-red-light: #E5053A;
-  --additional-red-dark: #A31621;
-  --additional-purple-light: #420039;
-  --additional-yellow: #F9A21A;
-  --additional-skyblue: #48C5F8;
-  --additional-orange: #D14600;
-  --additional-green-light: #96BA3C;
-  --additional-green-dark: #006400;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --breakpoint-narrow: 30rem;
-  --breakpoint-medium: 768px;
-  --breakpoint-wide: 60rem;
-  --breakpoint-extrawide: 75rem;
-  --breakpoint-max-width: 75rem;
-  --breakpoint-overwide: 80rem;
-}
-
-:host {
-  display: block;
-}
-
-.hy-accordion-container {
-  width: 100%;
-}
\ No newline at end of file
diff --git a/dist/collection/components/accordion-container/accordion-container.js b/dist/collection/components/accordion-container/accordion-container.js
deleted file mode 100644
index 6895cb9436775e62e6c5e9f39b4f5deac488f4b2..0000000000000000000000000000000000000000
--- a/dist/collection/components/accordion-container/accordion-container.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, Prop, h } from '@stencil/core';
-export class AccordionContainer {
-    render() {
-        const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
-        const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
-        return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" },
-            h("slot", null)));
-    }
-    static get is() { return "hy-accordion-container"; }
-    static get originalStyleUrls() { return {
-        "$": ["accordion-container.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["accordion-container.css"]
-    }; }
-    static get properties() { return {
-        "accordionid": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "accordionid",
-            "reflect": false
-        }
-    }; }
-}
diff --git a/dist/collection/components/accordion-item/accordion-item.css b/dist/collection/components/accordion-item/accordion-item.css
deleted file mode 100644
index 7fb7b71a1187111d536e36423736591b1f2d1544..0000000000000000000000000000000000000000
--- a/dist/collection/components/accordion-item/accordion-item.css
+++ /dev/null
@@ -1,162 +0,0 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --grayscale-white: #fff;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-black: #000000;
-  --additional-red-light: #E5053A;
-  --additional-red-dark: #A31621;
-  --additional-purple-light: #420039;
-  --additional-yellow: #F9A21A;
-  --additional-skyblue: #48C5F8;
-  --additional-orange: #D14600;
-  --additional-green-light: #96BA3C;
-  --additional-green-dark: #006400;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --breakpoint-narrow: 30rem;
-  --breakpoint-medium: 768px;
-  --breakpoint-wide: 60rem;
-  --breakpoint-extrawide: 75rem;
-  --breakpoint-max-width: 75rem;
-  --breakpoint-overwide: 80rem;
-}
-
-:host {
-  display: block;
-}
-
-.hy-accordion__item {
-  margin-bottom: 1rem;
-  -webkit-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-}
-
-.hy-accordion__item__is-open {
-  background: linear-gradient(to bottom, var(--grayscale-dark) 2px, transparent 2px, transparent calc(100% - 2px), var(--grayscale-dark) calc(100% - 2px)) no-repeat, linear-gradient(to left, var(--grayscale-dark) 2px, transparent 2px, transparent calc(100% - 2px), var(--grayscale-dark) calc(100% - 2px)) no-repeat;
-  background-position: center;
-  background-size: calc(100% - .5rem) 100%, 100% calc(100% - .5rem);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  -webkit-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-}
-
-@media (min-width: 48em) {
-  .hy-accordion__item__is-open {
-    margin-left: -2rem;
-    margin-right: -2rem;
-  }
-}
-
-.hy-accordion__item__is-open .hy-accordion--heading {
-  margin: 0 auto;
-  width: calc(100% - 2.25rem);
-  -webkit-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-}
-
-@media (min-width: 48em) {
-  .hy-accordion__item__is-open .hy-accordion--heading {
-    width: calc(100% - 4.25rem);
-  }
-}
-
-.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon {
-  -webkit-transform: rotateX(180deg);
-  transform: rotateX(180deg);
-}
-
-.hy-accordion--heading {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  letter-spacing: -0.69px;
-  line-height: 28px;
-  margin: 0 auto;
-  -webkit-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-  width: 100%;
-}
-
-.hy-accordion--heading .hy-accordion__button {
-  background: linear-gradient(to bottom, var(--grayscale-dark) 1px, transparent 1px, transparent calc(100% - 1px), var(--grayscale-dark) calc(100% - 1px)) no-repeat, linear-gradient(to left, var(--grayscale-dark) 1px, transparent 1px, transparent calc(100% - 1px), var(--grayscale-dark) calc(100% - 1px)) no-repeat;
-  background-position: center;
-  background-size: calc(100% - .5rem) 100%, 100% calc(100% - .5rem);
-  color: var(--brand-main-nearly-black);
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  font-family: var(--main-font-family);
-  font-size: 22px;
-  font-weight: 600;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  padding: 0.75rem 1.75rem 0.75rem 1.25rem;
-  width: 100%;
-  -webkit-transition: all 0.35s ease-in;
-  transition: all 0.35s ease-in;
-}
-
-@media (min-width: 48em) {
-  .hy-accordion--heading .hy-accordion__button {
-    font-size: 26px;
-    letter-spacing: -0.82px;
-    line-height: 32px;
-  }
-}
-
-.hy-accordion--heading .hy-accordion__button[aria-expanded=true] {
-  background: none;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 1px solid var(--grayscale-medium-dark);
-  padding: 0.85rem 1rem 1rem 1rem;
-  -webkit-transition: all 0.35s ease-in;
-  transition: all 0.35s ease-in;
-}
-
-.hy-accordion--heading .hy-accordion--heading__icon {
-  margin-right: 0.95rem;
-}
-
-.hy-accordion--heading .hy-accordion--heading__icon svg {
-  fill: var(--brand-main);
-}
-
-.hy-accordion__content {
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-  -webkit-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-}
-
-.hy-accordion__content--inner-wrapper {
-  display: block;
-  padding: 1rem 5% 1.25rem !important;
-}
\ No newline at end of file
diff --git a/dist/collection/components/accordion-item/accordion-item.js b/dist/collection/components/accordion-item/accordion-item.js
deleted file mode 100644
index 4a021b5ed8ff9b4c1bc33388f6c194b95057b880..0000000000000000000000000000000000000000
--- a/dist/collection/components/accordion-item/accordion-item.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import { Component, Prop, State, Element, h } from '@stencil/core';
-export class AccordionItem {
-    constructor() {
-        this.ready = false;
-    }
-    componentDidLoad() {
-        this.ready = true;
-    }
-    render() {
-        const containerId = this.el.parentElement.id;
-        function collapseSection(element) {
-            element.style.height = 0 + 'px';
-            element.setAttribute('data-collapsed', 'true');
-        }
-        function expandSection(element) {
-            element.style.height = element.scrollHeight + 'px';
-            element.setAttribute('data-collapsed', 'false');
-        }
-        if (this.ready && containerId.length > 0) {
-            document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
-                const allowMultiple = accordion.hasAttribute('data-allow-multiple');
-                const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
-                const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
-                accordion.addEventListener('click', function (event) {
-                    let target = event.target;
-                    if (target && target.classList.contains('hy-accordion__button')) {
-                        let targetParent = target.closest('.hy-accordion__item');
-                        let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
-                        const isExpanded = target.getAttribute('aria-expanded') == 'true';
-                        const active = accordion.querySelector('[aria-expanded="true"]');
-                        if (!allowMultiple && active && active !== target) {
-                            active.setAttribute('aria-expanded', 'false');
-                            collapseSection(targetContent);
-                            if (targetParent.classList.contains('hy-accordion__item__is-open')) {
-                                targetParent.classList.remove('hy-accordion__item__is-open');
-                            }
-                            accordion.querySelector(`#${active.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
-                            if (!allowToggle) {
-                                active.removeAttribute('aria-disabled');
-                            }
-                        }
-                        if (!isExpanded) {
-                            expandSection(targetContent);
-                            target.setAttribute('aria-expanded', 'true');
-                            targetParent.classList.add('hy-accordion__item__is-open');
-                            accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
-                            if (!allowToggle) {
-                                target.setAttribute('aria-disabled', 'true');
-                            }
-                        }
-                        else if (allowToggle && isExpanded) {
-                            target.setAttribute('aria-expanded', 'false');
-                            collapseSection(targetContent);
-                            if (targetParent.classList.contains('hy-accordion__item__is-open')) {
-                                targetParent.classList.remove('hy-accordion__item__is-open');
-                            }
-                            accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
-                        }
-                        event.preventDefault();
-                        event.stopImmediatePropagation();
-                    }
-                });
-                if (accordion) {
-                    accordion.addEventListener('keydown', function (event) {
-                        const target = event.target;
-                        const key = event.which.toString();
-                        // 33 = Page Up, 34 = Page Down
-                        const ctrlModifier = (event.ctrlKey && key.match(/33|34/));
-                        if (target.classList.contains('hy-accordion__button')) {
-                            // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
-                            // 38 = Up, 40 = Down
-                            if (key.match(/38|40/) || ctrlModifier) {
-                                const index = triggers.indexOf(target);
-                                const direction = (key.match(/34|40/)) ? 1 : -1;
-                                const length = triggers.length;
-                                const newIndex = (index + length + direction) % length;
-                                triggers[newIndex].focus();
-                                event.preventDefault();
-                            }
-                            else if (key.match(/35|36/)) {
-                                // 35 = End, 36 = Home keyboard operations
-                                switch (key) {
-                                    // Go to first accordion
-                                    case '36':
-                                        triggers[0].focus();
-                                        break;
-                                    // Go to last accordion
-                                    case '35':
-                                        triggers[triggers.length - 1].focus();
-                                        break;
-                                }
-                                event.preventDefault();
-                            }
-                        }
-                    });
-                    accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
-                        trigger.addEventListener('focus', function () {
-                            trigger.classList.add('focus');
-                        });
-                        trigger.addEventListener('blur', function () {
-                            trigger.classList.remove('focus');
-                        });
-                    });
-                }
-            });
-        }
-        const classAttributes = ["hy-accordion__item"];
-        const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
-        return (h("div", { class: classAttributes.join(" ") },
-            h("div", { class: "hy-accordion--heading" },
-                h("button", { "aria-expanded": "false", "aria-controls": `${titleAsId}--content`, class: "hy-accordion__button", id: `${titleAsId}--title` },
-                    h("span", { class: "hy-accordion--heading__icon" },
-                        h("hy-icon", { icon: 'hy-icon-caret-down', size: 16 })),
-                    this.accordiontitle)),
-            h("div", { "aria-labelledBy": `${titleAsId}--title`, class: "hy-accordion__content", id: `${titleAsId}--content`, role: "region" },
-                h("div", { class: "hy-accordion__content--inner-wrapper" },
-                    h("slot", null)))));
-    }
-    static get is() { return "hy-accordion-item"; }
-    static get originalStyleUrls() { return {
-        "$": ["accordion-item.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["accordion-item.css"]
-    }; }
-    static get properties() { return {
-        "accordiontitle": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "accordiontitle",
-            "reflect": false
-        }
-    }; }
-    static get states() { return {
-        "ready": {}
-    }; }
-    static get elementRef() { return "el"; }
-}
diff --git a/dist/collection/components/heading/heading.css b/dist/collection/components/heading/heading.css
deleted file mode 100644
index d675ad2f739b047cf2e13c3d1279e5426af02d56..0000000000000000000000000000000000000000
--- a/dist/collection/components/heading/heading.css
+++ /dev/null
@@ -1,194 +0,0 @@
-:root {
-  --brand-main: #0e688b;
-  --brand-main-light: #107eab;
-  --brand-main-active: #005379;
-  --brand-main-dark: #003146;
-  --brand-main-nearly-black: #000222;
-  --grayscale-white: #fff;
-  --grayscale-light: #f8f8f8;
-  --grayscale-medium: #d2d2d2;
-  --grayscale-medium-dark: #979797;
-  --grayscale-dark: #555555;
-  --grayscale-black: #000000;
-  --additional-red-light: #E5053A;
-  --additional-red-dark: #A31621;
-  --additional-purple-light: #420039;
-  --additional-yellow: #F9A21A;
-  --additional-skyblue: #48C5F8;
-  --additional-orange: #D14600;
-  --additional-green-light: #96BA3C;
-  --additional-green-dark: #006400;
-}
-
-* {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-:root {
-  --breakpoint-narrow: 30rem;
-  --breakpoint-medium: 768px;
-  --breakpoint-wide: 60rem;
-  --breakpoint-extrawide: 75rem;
-  --breakpoint-max-width: 75rem;
-  --breakpoint-overwide: 80rem;
-}
-
-:host {
-  display: block;
-}
-
-.hy-heading__container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-  width: 100%;
-}
-
-@media (min-width: 48em) {
-  .hy-heading__container {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
-.hy-heading {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  max-width: 100%;
-  width: auto;
-}
-
-.hy-heading__subsection {
-  -ms-flex-negative: 2;
-  flex-shrink: 2;
-  overflow: hidden;
-  width: 100%;
-}
-
-.hy-heading__subsection:after {
-  background-color: var(--brand-main-nearly-black);
-  content: " ";
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 2px;
-  width: 100%;
-  margin-left: 0;
-  margin-bottom: 1rem;
-  position: relative;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-@media (min-width: 48em) {
-  .hy-heading__subsection:after {
-    margin-left: 2rem;
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: var(--brand-main-nearly-black);
-  font-family: var(--main-font-family);
-  font-weight: 600;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-h1 {
-  font-size: 32px;
-  letter-spacing: -1px;
-  line-height: 40px;
-}
-
-@media (min-width: 48em) {
-  h1 {
-    font-size: 48px;
-    letter-spacing: -1.5px;
-    line-height: 64px;
-  }
-}
-
-h2 {
-  font-size: 26px;
-  letter-spacing: -0.82px;
-  line-height: 32px;
-}
-
-@media (min-width: 48em) {
-  h2 {
-    font-size: 32px;
-    letter-spacing: -1px;
-    line-height: 40px;
-  }
-}
-
-h3 {
-  font-size: 22px;
-  letter-spacing: -0.69px;
-  line-height: 28px;
-}
-
-@media (min-width: 48em) {
-  h3 {
-    font-size: 26px;
-    letter-spacing: -0.82px;
-    line-height: 32px;
-  }
-}
-
-h4 {
-  font-size: 18px;
-  letter-spacing: -0.56px;
-  line-height: 24px;
-}
-
-@media (min-width: 48em) {
-  h4 {
-    font-size: 22px;
-    letter-spacing: -0.69px;
-    line-height: 28px;
-  }
-}
-
-h5 {
-  font-size: 16px;
-  letter-spacing: -0.5px;
-  line-height: 20px;
-}
-
-@media (min-width: 48em) {
-  h5 {
-    font-size: 18px;
-    letter-spacing: -0.56px;
-    line-height: 24px;
-  }
-}
-
-h6 {
-  font-size: 14px;
-  letter-spacing: -0.44px;
-  line-height: 16px;
-}
-
-@media (min-width: 48em) {
-  h6 {
-    font-size: 16px;
-    letter-spacing: -0.5px;
-    line-height: 20px;
-  }
-}
\ No newline at end of file
diff --git a/dist/collection/components/icon/icon.js b/dist/collection/components/icon/icon.js
deleted file mode 100644
index ce795b573db291a00d7ee946e86259e6144fef9e..0000000000000000000000000000000000000000
--- a/dist/collection/components/icon/icon.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Component, h, Prop, Host } from "@stencil/core";
-import * as icons from "./icons";
-// TODO: add all icons
-const iconNames = {
-    "hy-icon-arrow-left": p => h(icons.IconArrowLeft, Object.assign({}, p)),
-    "hy-icon-arrow-right": p => h(icons.IconArrowRight, Object.assign({}, p)),
-    "hy-icon-arrow-down": p => h(icons.ArrowDown, Object.assign({}, p)),
-    "hy-icon-caret-down": p => h(icons.CaretDown, Object.assign({}, p)),
-    "hy-icon-link-arrow-down": p => h(icons.LinkArrowDown, Object.assign({}, p)),
-    "hy-icon-hy-logo": p => h(icons.HyLogo, Object.assign({}, p)),
-    "hy-icon-camera": p => h(icons.Camera, Object.assign({}, p)),
-    "hy-icon-image-gallery": p => h(icons.ImageGallery, Object.assign({}, p))
-};
-export class Icon {
-    constructor() {
-        this.fill = "black";
-        this.size = 20;
-    }
-    render() {
-        return (h(Host, { "aria-hidden": "true", style: { display: "flex" } }, iconNames[this.icon]({
-            height: this.size,
-            width: this.size,
-            fill: this.fill
-        })));
-    }
-    static get is() { return "hy-icon"; }
-    static get originalStyleUrls() { return {
-        "$": ["icon.css"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["icon.css"]
-    }; }
-    static get properties() { return {
-        "icon": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "icon",
-            "reflect": false
-        },
-        "fill": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "string",
-                "resolved": "string",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "fill",
-            "reflect": false,
-            "defaultValue": "\"black\""
-        },
-        "size": {
-            "type": "number",
-            "mutable": false,
-            "complexType": {
-                "original": "number",
-                "resolved": "number",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "size",
-            "reflect": false,
-            "defaultValue": "20"
-        }
-    }; }
-}
diff --git a/dist/types/components.d.ts b/dist/types/components.d.ts
deleted file mode 100644
index 8a46de410cb670d262af22b44fe802ce54757e13..0000000000000000000000000000000000000000
--- a/dist/types/components.d.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/**
- * This is an autogenerated file created by the Stencil compiler.
- * It contains typing information for all components that exist in this project.
- */
-import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ButtonStates, ButtonVariants, GridAlignVariants, GridColumns, GridColumnsLg, GridColumnsSm, HeadingSectionVariants, HeadingVarians, LinkVariants, } from "./utils/utils";
-export namespace Components {
-    interface HyAccordionContainer {
-        "accordionid"?: string;
-    }
-    interface HyAccordionItem {
-        "accordiontitle"?: string;
-    }
-    interface HyBaseline {
-    }
-    interface HyButton {
-        "icon"?: string;
-        "iconRight"?: string;
-        "state": ButtonStates;
-        "variant": ButtonVariants;
-    }
-    interface HyDocsContainer {
-    }
-    interface HyGridContainer {
-    }
-    interface HyGridItem {
-        "columns": GridColumns;
-        "columnslg": GridColumnsLg;
-        "columnssm": GridColumnsSm;
-        "contentalign": GridAlignVariants;
-    }
-    interface HyGridRow {
-    }
-    interface HyHeading {
-        "heading": HeadingVarians;
-        "section": HeadingSectionVariants;
-    }
-    interface HyIcon {
-        "fill": string;
-        "icon": string;
-        "size": number;
-    }
-    interface HyIngress {
-    }
-    interface HyLink {
-        "ariaLabel"?: string;
-        "isExternal": boolean;
-        "linkContent": string;
-        "url"?: string;
-        "variant": LinkVariants;
-    }
-    interface HyParagraphText {
-    }
-    interface HyRow {
-        "align": string;
-        "justify": string;
-    }
-    interface HySectionContainer {
-    }
-    interface HyTinyText {
-    }
-}
-declare global {
-    interface HTMLHyAccordionContainerElement extends Components.HyAccordionContainer, HTMLStencilElement {
-    }
-    var HTMLHyAccordionContainerElement: {
-        prototype: HTMLHyAccordionContainerElement;
-        new (): HTMLHyAccordionContainerElement;
-    };
-    interface HTMLHyAccordionItemElement extends Components.HyAccordionItem, HTMLStencilElement {
-    }
-    var HTMLHyAccordionItemElement: {
-        prototype: HTMLHyAccordionItemElement;
-        new (): HTMLHyAccordionItemElement;
-    };
-    interface HTMLHyBaselineElement extends Components.HyBaseline, HTMLStencilElement {
-    }
-    var HTMLHyBaselineElement: {
-        prototype: HTMLHyBaselineElement;
-        new (): HTMLHyBaselineElement;
-    };
-    interface HTMLHyButtonElement extends Components.HyButton, HTMLStencilElement {
-    }
-    var HTMLHyButtonElement: {
-        prototype: HTMLHyButtonElement;
-        new (): HTMLHyButtonElement;
-    };
-    interface HTMLHyDocsContainerElement extends Components.HyDocsContainer, HTMLStencilElement {
-    }
-    var HTMLHyDocsContainerElement: {
-        prototype: HTMLHyDocsContainerElement;
-        new (): HTMLHyDocsContainerElement;
-    };
-    interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {
-    }
-    var HTMLHyGridContainerElement: {
-        prototype: HTMLHyGridContainerElement;
-        new (): HTMLHyGridContainerElement;
-    };
-    interface HTMLHyGridItemElement extends Components.HyGridItem, HTMLStencilElement {
-    }
-    var HTMLHyGridItemElement: {
-        prototype: HTMLHyGridItemElement;
-        new (): HTMLHyGridItemElement;
-    };
-    interface HTMLHyGridRowElement extends Components.HyGridRow, HTMLStencilElement {
-    }
-    var HTMLHyGridRowElement: {
-        prototype: HTMLHyGridRowElement;
-        new (): HTMLHyGridRowElement;
-    };
-    interface HTMLHyHeadingElement extends Components.HyHeading, HTMLStencilElement {
-    }
-    var HTMLHyHeadingElement: {
-        prototype: HTMLHyHeadingElement;
-        new (): HTMLHyHeadingElement;
-    };
-    interface HTMLHyIconElement extends Components.HyIcon, HTMLStencilElement {
-    }
-    var HTMLHyIconElement: {
-        prototype: HTMLHyIconElement;
-        new (): HTMLHyIconElement;
-    };
-    interface HTMLHyIngressElement extends Components.HyIngress, HTMLStencilElement {
-    }
-    var HTMLHyIngressElement: {
-        prototype: HTMLHyIngressElement;
-        new (): HTMLHyIngressElement;
-    };
-    interface HTMLHyLinkElement extends Components.HyLink, HTMLStencilElement {
-    }
-    var HTMLHyLinkElement: {
-        prototype: HTMLHyLinkElement;
-        new (): HTMLHyLinkElement;
-    };
-    interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {
-    }
-    var HTMLHyParagraphTextElement: {
-        prototype: HTMLHyParagraphTextElement;
-        new (): HTMLHyParagraphTextElement;
-    };
-    interface HTMLHyRowElement extends Components.HyRow, HTMLStencilElement {
-    }
-    var HTMLHyRowElement: {
-        prototype: HTMLHyRowElement;
-        new (): HTMLHyRowElement;
-    };
-    interface HTMLHySectionContainerElement extends Components.HySectionContainer, HTMLStencilElement {
-    }
-    var HTMLHySectionContainerElement: {
-        prototype: HTMLHySectionContainerElement;
-        new (): HTMLHySectionContainerElement;
-    };
-    interface HTMLHyTinyTextElement extends Components.HyTinyText, HTMLStencilElement {
-    }
-    var HTMLHyTinyTextElement: {
-        prototype: HTMLHyTinyTextElement;
-        new (): HTMLHyTinyTextElement;
-    };
-    interface HTMLElementTagNameMap {
-        "hy-accordion-container": HTMLHyAccordionContainerElement;
-        "hy-accordion-item": HTMLHyAccordionItemElement;
-        "hy-baseline": HTMLHyBaselineElement;
-        "hy-button": HTMLHyButtonElement;
-        "hy-docs-container": HTMLHyDocsContainerElement;
-        "hy-grid-container": HTMLHyGridContainerElement;
-        "hy-grid-item": HTMLHyGridItemElement;
-        "hy-grid-row": HTMLHyGridRowElement;
-        "hy-heading": HTMLHyHeadingElement;
-        "hy-icon": HTMLHyIconElement;
-        "hy-ingress": HTMLHyIngressElement;
-        "hy-link": HTMLHyLinkElement;
-        "hy-paragraph-text": HTMLHyParagraphTextElement;
-        "hy-row": HTMLHyRowElement;
-        "hy-section-container": HTMLHySectionContainerElement;
-        "hy-tiny-text": HTMLHyTinyTextElement;
-    }
-}
-declare namespace LocalJSX {
-    interface HyAccordionContainer {
-        "accordionid"?: string;
-    }
-    interface HyAccordionItem {
-        "accordiontitle"?: string;
-    }
-    interface HyBaseline {
-    }
-    interface HyButton {
-        "icon"?: string;
-        "iconRight"?: string;
-        "state"?: ButtonStates;
-        "variant"?: ButtonVariants;
-    }
-    interface HyDocsContainer {
-    }
-    interface HyGridContainer {
-    }
-    interface HyGridItem {
-        "columns"?: GridColumns;
-        "columnslg"?: GridColumnsLg;
-        "columnssm"?: GridColumnsSm;
-        "contentalign"?: GridAlignVariants;
-    }
-    interface HyGridRow {
-    }
-    interface HyHeading {
-        "heading"?: HeadingVarians;
-        "section"?: HeadingSectionVariants;
-    }
-    interface HyIcon {
-        "fill"?: string;
-        "icon"?: string;
-        "size"?: number;
-    }
-    interface HyIngress {
-    }
-    interface HyLink {
-        "ariaLabel"?: string;
-        "isExternal"?: boolean;
-        "linkContent"?: string;
-        "url"?: string;
-        "variant"?: LinkVariants;
-    }
-    interface HyParagraphText {
-    }
-    interface HyRow {
-        "align"?: string;
-        "justify"?: string;
-    }
-    interface HySectionContainer {
-    }
-    interface HyTinyText {
-    }
-    interface IntrinsicElements {
-        "hy-accordion-container": HyAccordionContainer;
-        "hy-accordion-item": HyAccordionItem;
-        "hy-baseline": HyBaseline;
-        "hy-button": HyButton;
-        "hy-docs-container": HyDocsContainer;
-        "hy-grid-container": HyGridContainer;
-        "hy-grid-item": HyGridItem;
-        "hy-grid-row": HyGridRow;
-        "hy-heading": HyHeading;
-        "hy-icon": HyIcon;
-        "hy-ingress": HyIngress;
-        "hy-link": HyLink;
-        "hy-paragraph-text": HyParagraphText;
-        "hy-row": HyRow;
-        "hy-section-container": HySectionContainer;
-        "hy-tiny-text": HyTinyText;
-    }
-}
-export { LocalJSX as JSX };
-declare module "@stencil/core" {
-    export namespace JSX {
-        interface IntrinsicElements {
-            "hy-accordion-container": LocalJSX.HyAccordionContainer & JSXBase.HTMLAttributes<HTMLHyAccordionContainerElement>;
-            "hy-accordion-item": LocalJSX.HyAccordionItem & JSXBase.HTMLAttributes<HTMLHyAccordionItemElement>;
-            "hy-baseline": LocalJSX.HyBaseline & JSXBase.HTMLAttributes<HTMLHyBaselineElement>;
-            "hy-button": LocalJSX.HyButton & JSXBase.HTMLAttributes<HTMLHyButtonElement>;
-            "hy-docs-container": LocalJSX.HyDocsContainer & JSXBase.HTMLAttributes<HTMLHyDocsContainerElement>;
-            "hy-grid-container": LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
-            "hy-grid-item": LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
-            "hy-grid-row": LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;
-            "hy-heading": LocalJSX.HyHeading & JSXBase.HTMLAttributes<HTMLHyHeadingElement>;
-            "hy-icon": LocalJSX.HyIcon & JSXBase.HTMLAttributes<HTMLHyIconElement>;
-            "hy-ingress": LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>;
-            "hy-link": LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
-            "hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
-            "hy-row": LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
-            "hy-section-container": LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
-            "hy-tiny-text": LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
-        }
-    }
-}
diff --git a/dist/types/components/accordion-container/accordion-container.d.ts b/dist/types/components/accordion-container/accordion-container.d.ts
deleted file mode 100644
index acea7611f744b8b1bbcc697fa673874b885f0e12..0000000000000000000000000000000000000000
--- a/dist/types/components/accordion-container/accordion-container.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export declare class AccordionContainer {
-    accordionid?: string;
-    render(): any;
-}
diff --git a/dist/types/components/accordion-item/accordion-item.d.ts b/dist/types/components/accordion-item/accordion-item.d.ts
deleted file mode 100644
index 2b67d139754bccea0bc89ddaa023449f8a73306b..0000000000000000000000000000000000000000
--- a/dist/types/components/accordion-item/accordion-item.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export declare class AccordionItem {
-    el: HTMLElement;
-    accordiontitle?: string;
-    ready: boolean;
-    componentDidLoad(): void;
-    render(): any;
-}
diff --git a/src/components.d.ts b/src/components.d.ts
index 837bd1f9b7da2ed6d46ded5fd9abe75cb4549ad9..b90b200aa8a6bd1b8977dbca1ac08ccb437874f5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -51,6 +51,15 @@ export namespace Components {
         "url"?: string;
         "variant": LinkVariants;
     }
+    interface HyLinkBox {
+        "ariaLabel"?: string;
+        "imageAlt": string;
+        "imageUrl": string;
+        "isExternal": boolean;
+        "textDescription": string;
+        "textTitle"?: string;
+        "url"?: string;
+    }
     interface HyParagraphText {
     }
     interface HyRow {
@@ -135,6 +144,12 @@ declare global {
         prototype: HTMLHyLinkElement;
         new (): HTMLHyLinkElement;
     };
+    interface HTMLHyLinkBoxElement extends Components.HyLinkBox, HTMLStencilElement {
+    }
+    var HTMLHyLinkBoxElement: {
+        prototype: HTMLHyLinkBoxElement;
+        new (): HTMLHyLinkBoxElement;
+    };
     interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {
     }
     var HTMLHyParagraphTextElement: {
@@ -172,6 +187,7 @@ declare global {
         "hy-icon": HTMLHyIconElement;
         "hy-ingress": HTMLHyIngressElement;
         "hy-link": HTMLHyLinkElement;
+        "hy-link-box": HTMLHyLinkBoxElement;
         "hy-paragraph-text": HTMLHyParagraphTextElement;
         "hy-row": HTMLHyRowElement;
         "hy-section-container": HTMLHySectionContainerElement;
@@ -223,6 +239,15 @@ declare namespace LocalJSX {
         "url"?: string;
         "variant"?: LinkVariants;
     }
+    interface HyLinkBox {
+        "ariaLabel"?: string;
+        "imageAlt"?: string;
+        "imageUrl"?: string;
+        "isExternal"?: boolean;
+        "textDescription"?: string;
+        "textTitle"?: string;
+        "url"?: string;
+    }
     interface HyParagraphText {
     }
     interface HyRow {
@@ -246,6 +271,7 @@ declare namespace LocalJSX {
         "hy-icon": HyIcon;
         "hy-ingress": HyIngress;
         "hy-link": HyLink;
+        "hy-link-box": HyLinkBox;
         "hy-paragraph-text": HyParagraphText;
         "hy-row": HyRow;
         "hy-section-container": HySectionContainer;
@@ -268,6 +294,7 @@ declare module "@stencil/core" {
             "hy-icon": LocalJSX.HyIcon & JSXBase.HTMLAttributes<HTMLHyIconElement>;
             "hy-ingress": LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>;
             "hy-link": LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
+            "hy-link-box": LocalJSX.HyLinkBox & JSXBase.HTMLAttributes<HTMLHyLinkBoxElement>;
             "hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
             "hy-row": LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
             "hy-section-container": LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index aa8ffb0b96a6e31d2161f51bf7ae24d92ff25d13..3e0341a1b8ae25a16c2a8b2874f57183594b96fc 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -47,19 +47,19 @@
     $border-color: var(--grayscale-dark);
     @include border-without-corners($border-color, 1px);
 
+    align-items: center;
+    border: none;
     color: var(--brand-main-nearly-black);
+    display: flex;
     flex-direction: row;
     font-family: var(--main-font-family);
     font-size: 22px;
     font-weight: 600;
-    align-items: center;
-    border: none;
-    display: flex;
     height: 100%;
     justify-content: flex-start;
     padding: .75rem 1.75rem .75rem 1.25rem;
-    width: 100%;
     transition: all .35s ease-in;
+    width: 100%;
 
     @include breakpoint($medium) {
       font-size: 26px;
@@ -69,10 +69,10 @@
 
     &[aria-expanded=true] {
       background: none;
-      border-top: 0;
+      border-bottom: 1px solid var(--grayscale-medium-dark);
       border-left: 0;
       border-right: 0;
-      border-bottom: 1px solid var(--grayscale-medium-dark);
+      border-top: 0;
       padding: .85rem 1rem 1rem 1rem;
       transition: all .35s ease-in;
     }
@@ -90,8 +90,8 @@
 .hy-accordion__content {
   display: block;
   height: 0;
-  padding: 0;
   overflow: hidden;
+  padding: 0;
   transition: all .25s ease-in-out;
 
   &--inner-wrapper {
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 6408ff4b94ac528740128e5834bc5ab4cb96ee15..7b58fe8de26618cf2928eb1bfeb65517d9ee1ea7 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -5,6 +5,7 @@ import { Component, Prop, State, Element, h } from '@stencil/core';
   styleUrl: 'accordion-item.scss',
   shadow: false
 })
+
 export class AccordionItem {
   @Element() el: HTMLElement;
   @Prop() accordiontitle?: string;
diff --git a/src/components/grid-item/grid-item.scss b/src/components/grid-item/grid-item.scss
index 87da404fb82139bb6ba62f4ec399eb28071bd1ff..d39394741585f014413fdd3368509ab185ad8a0d 100644
--- a/src/components/grid-item/grid-item.scss
+++ b/src/components/grid-item/grid-item.scss
@@ -25,9 +25,8 @@
 }
 
 // grid
-
-$width: 96%;
-$gutter: 4%;
+$width: 98%;
+$gutter: 2%;
 
 $narrow: 30em; // 480px
 $medium: 48em; // 768px
diff --git a/src/components/grid-item/grid-item.tsx b/src/components/grid-item/grid-item.tsx
index 3bc8657913e43bbe07b9058a2749fb93a8be672d..6fb470112fba91d02dee78a0f40aab520f86e3fb 100644
--- a/src/components/grid-item/grid-item.tsx
+++ b/src/components/grid-item/grid-item.tsx
@@ -11,6 +11,7 @@ import {
   styleUrl: 'grid-item.scss',
   shadow: false
 })
+
 export class GridItem {
   @Prop() columns: GridColumns = GridColumns.default;
   @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;
@@ -26,7 +27,7 @@ export class GridItem {
       `hy-grid-align__${this.contentalign}`,
     ];
 
-      return (
+    return (
       <Host
         class={classAttributes.join(" ")}
       >
diff --git a/src/components/grid-row/grid-row.scss b/src/components/grid-row/grid-row.scss
index 9e7faac7173d2b363aa32aaa2ce2ad54a2421c8b..524b0ff21750c245f46affffac239fe645ff3c68 100644
--- a/src/components/grid-row/grid-row.scss
+++ b/src/components/grid-row/grid-row.scss
@@ -3,15 +3,22 @@
 }
 
 .hy-grid__row {
-  display: block;
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
   position: relative;
   width: 100%;
 }
 
 .hy-grid__row > [class^="hy-grid-item"] {
   float: left;
-  margin: 0.5rem 2%;
+  margin: .5rem 1%;
   min-height: 0.125rem;
+  
+  @include breakpoint($medium) {
+    margin: 1%;
+  }
 }
 
 .hy-grid__row::after {
diff --git a/src/components/grid-row/grid-row.tsx b/src/components/grid-row/grid-row.tsx
index 9114c85cd95f7c832f2e3fd48bd3a3e2ef536b67..cda4f6c24f82787d753b8aa23ec902714df6ab81 100644
--- a/src/components/grid-row/grid-row.tsx
+++ b/src/components/grid-row/grid-row.tsx
@@ -5,8 +5,8 @@ import { Component, Host, h } from '@stencil/core';
   styleUrl: 'grid-row.scss',
   shadow: false
 })
-export class GridRow {
 
+export class GridRow {
   render() {
     const classAttributes = ["hy-grid__row"];
 
@@ -16,6 +16,4 @@ export class GridRow {
       </Host>
     );
   }
-
-
 }
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index f7dd367b17b9e80e666cf3f52ca40d638de8d688..5016b953de930e21fb4a60851972cc1d16365556 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -20,12 +20,14 @@
 
  - [hy-accordion-item](../accordion-item)
  - [hy-button](../button)
+ - [hy-link-box](../link-box)
 
 ### Graph
 ```mermaid
 graph TD;
   hy-accordion-item --> hy-icon
   hy-button --> hy-icon
+  hy-link-box --> hy-icon
   style hy-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f6990b20f78daf9e4e985777285e991d6eb2971f
--- /dev/null
+++ b/src/components/link-box/link-box.scss
@@ -0,0 +1,103 @@
+:host {
+  display: block;
+  height: 100.5%;
+}
+
+.hy-link-box {
+  $border-color: var(--brand-main);
+  @include border-without-corners($border-color, 1px);
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+
+  &__image-container {
+    border-left: 1px solid var(--brand-main);
+    border-right: 1px solid var(--brand-main);
+    border-top: 1px solid var(--brand-main);
+    display: flex;
+    justify-content: stretch;
+    margin-bottom: 0;
+    min-height: 10rem;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      padding-top: (10 / 16) * 100%;
+      width: 100%;
+    }
+
+    > img {
+      bottom: 0;
+      height: 100%;
+      left: 0;
+      object-fit: cover;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  &--with-image {
+    justify-content: flex-start;
+
+    .hy-link-box__text-container {
+      margin: 0 1px 2rem -1px;
+      padding: 1.25rem .5rem 1.25rem 0;
+      
+      @include breakpoint($medium) {
+        padding: 1.25rem .5rem 1.25rem 0;  
+      }
+    }
+  }
+
+  &__text-container {
+    background: var(--grayscale-white);
+    margin: 3rem 1px 3rem -1px;
+    padding: 1.5rem .5rem 1.5rem 0;
+
+    @include breakpoint($medium) {
+      margin: 1px 1px 1px -1px;
+      padding: 2.5rem .5rem 2.5rem 0;    
+    }
+
+    &__title {
+      color: var(--brand-main-nearly-black);
+      font-family: "Open Sans";
+      font-size: 20px;
+      font-weight: 600;
+      letter-spacing: -0.63px;
+      line-height: 26px;
+      margin-bottom: 11px;
+    }
+
+    &__description {
+      color: var(--grayscale-dark);
+      font-family: "Open Sans";
+      font-size: 14px;
+      letter-spacing: -0.2px;
+      line-height: 20px;
+    }
+  }
+
+  &__link-icon {
+    bottom: .75rem;
+    position: absolute;
+    right: .75rem;
+
+    svg {
+      fill: var(--brand-main);
+    }
+
+    &--external {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+
diff --git a/src/components/link-box/link-box.spec.tsx b/src/components/link-box/link-box.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c9fcbc623b9a2e647fc40ef0703a9dbbb4f4bbe
--- /dev/null
+++ b/src/components/link-box/link-box.spec.tsx
@@ -0,0 +1,7 @@
+import { LinkBox } from './link-box';
+
+describe('hy-link-box', () => {
+  it('builds', () => {
+    expect(new LinkBox()).toBeTruthy();
+  });
+});
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbae0b0503bf4b789c4ad768aab84f36c826ee36
--- /dev/null
+++ b/src/components/link-box/link-box.tsx
@@ -0,0 +1,55 @@
+import { Component, ComponentInterface, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'hy-link-box',
+  styleUrl: 'link-box.scss',
+  shadow: true,
+})
+export class LinkBox implements ComponentInterface {
+  @Prop() imageUrl: string = null;
+  @Prop() imageAlt: string = null;
+  @Prop() textTitle?: string;
+  @Prop() textDescription: string = null;
+  @Prop() url?: string;
+  @Prop() ariaLabel?: string;
+  @Prop() isExternal: boolean = false;
+
+  render() {    
+    const classAttributes = [
+      "hy-link-box",
+      this.imageUrl ? "hy-link-box--with-image" : null
+    ].join(" ");
+
+    const iconClassAttributes = [
+      "hy-link-box__link-icon",
+      this.isExternal ? "hy-link-box__link-icon--external" : null
+    ].join(" ");
+
+    const target = this.isExternal ? "_blank" : "_self";
+
+    return (
+      <a
+        aria-label={this.ariaLabel}
+        class={classAttributes}
+        href={this.url}
+        target={target}
+      >
+        { this.imageUrl && 
+          <div class="hy-link-box__image-container">
+            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+          </div>
+        }
+        <div class="hy-link-box__text-container">
+          <div class="hy-link-box__text-container__title">{ this.textTitle }</div>
+          { this.textDescription && 
+            <div class="hy-link-box__text-container__description">{ this.textDescription }</div> 
+          }
+        </div>
+        <span class={iconClassAttributes}>
+          <hy-icon icon={'hy-icon-arrow-right'} size={16} />
+        </span>
+      </a>
+    );
+  }
+
+}
diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..78acffbbb216973e34f291c8195546541c59eafb
--- /dev/null
+++ b/src/components/link-box/readme.md
@@ -0,0 +1,36 @@
+# hy-link-box
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute          | Description | Type      | Default     |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `ariaLabel`       | `aria-label`       |             | `string`  | `undefined` |
+| `imageAlt`        | `image-alt`        |             | `string`  | `null`      |
+| `imageUrl`        | `image-url`        |             | `string`  | `null`      |
+| `isExternal`      | `is-external`      |             | `boolean` | `false`     |
+| `textDescription` | `text-description` |             | `string`  | `null`      |
+| `textTitle`       | `text-title`       |             | `string`  | `undefined` |
+| `url`             | `url`              |             | `string`  | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+```mermaid
+graph TD;
+  hy-link-box --> hy-icon
+  style hy-link-box fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Helsinki University Design System
diff --git a/src/index.html b/src/index.html
index 13f055deafae2bc14f909acd53160191c2b48011..8b1716a6d607853e4a13bd4a9af35306708c5141 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,101 +1,70 @@
 <!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
-      <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-grid-container>
-      <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
-          >
+<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-grid-container>
+    <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>
@@ -108,16 +77,36 @@
         <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-grid-item columnsSM="12">
         <hy-docs-container>
           <hy-accordion-container accordionid="example-1">
             <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. 
+              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>
@@ -125,36 +114,59 @@
                   <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. 
+                    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 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. 
+                    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>
                     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.             
+                    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.
+              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>
@@ -165,146 +177,78 @@
         <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-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-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-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-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-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">
@@ -312,7 +256,77 @@
           </hy-accordion-item>
         </hy-accordion-container>
       </hy-grid-item>
-      </hy-grid-row>
+    </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="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="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="6" columnsLg="4">
+        <hy-heading heading="h3">The end</hy-heading>
+      </hy-grid-item>
+    </hy-grid-row>
   </hy-grid-container>
-  </body>
+</body>
+
 </html>
diff --git a/www/index.html b/www/index.html
index eece513c7f24f074dd4ad6e75f09dab7e604950c..d0d839cb0deb73b256adc1cd2d300d03129f0beb 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,43 +1,67 @@
 <!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 <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-grid-container> <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-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-docs-container> <hy-accordion-container accordionid="example-1"> <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-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> </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-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> </hy-grid-row> </hy-grid-container> </body></html>
\ No newline at end of file
+              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-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> 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-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> </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-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> </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="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="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="6" columnslg="4"> <hy-heading heading="h3">The end</hy-heading> </hy-grid-item> </hy-grid-row> </hy-grid-container> <script>if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+  if (registration) {
+    registration.unregister().then(function() { location.reload(true) });
+  }
+  });
+}</script></body></html>
\ No newline at end of file