@gov-design-system-ce/components 0.0.6 → 0.0.8

package/dist/cjs/gov-app.cjs.entry.js

@@ -2908,6 +2908,43 @@ class AccordionPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 
+		<h4>Accordion - extra small</h4>
+		<div class="container-view">
+			<gov-accordion size="xs">
+				<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Kontaktní osoby" disabled is-expanded>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Působnost v agendách">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Zřizované organizace">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+			</gov-accordion>
+			<br>
+			<gov-accordion size="xs">
+				<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Kontaktní osoby">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Působnost v agendách">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Zřizované organizace">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+			</gov-accordion>
 			<h4>Accordion - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s">
@@ -2945,6 +2982,27 @@ class AccordionPage extends HTMLElement {
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-accordion-item>
 				</gov-accordion>
+				<br>
+				<h4>Without border</h4>
+				<gov-accordion size="s" no-border>
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
 			</div>
 
 			<h4>Accordion - medium (default)</h4>
@@ -3030,7 +3088,44 @@ class AccordionPage extends HTMLElement {
 
 
 
-
+			<h4>Accordion Secondary - extra small</h4>
+			<div class="container-view">
+				<gov-accordion size="xs" variant="secondary">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" disabled>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
+				<br>
+				<gov-accordion size="xs" variant="secondary">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
+			</div>
 			<h4>Accordion Secondary - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s" variant="secondary">
@@ -3091,7 +3186,7 @@ class AccordionPage extends HTMLElement {
 				<br>
 				<gov-accordion variant="secondary">
 					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet dictum consectetur. Sed posuere tellus in lobortis aliquam. Pellentesque a porttitor purus." is-expanded>
-						<gov-icon slot="icon" icon="info"></gov-icon>
+						<gov-icon slot="icon" name="info"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<gov-badge variant="primary" size="s" slot="suffix">super badge</gov-badge>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -3245,6 +3340,33 @@ class BadgePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Badges</h1>
+			<h4>Badges close</h4>
+			<div class="container-view">
+			<gov-badge variant="primary" size="s">
+				Not clickable S
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="s">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="m">
+				Not clickable M
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="m">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="l">
+				Not clickable L
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="l">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="xl">
+				Not clickable XL
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="xl">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			</div>
 			<h4>Badges - primary (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="primary" size="xs">
@@ -3592,22 +3714,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="primary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<h4>Buttons - primary (expanded)</h4>
@@ -3621,22 +3743,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3676,22 +3798,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (outlined inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 
@@ -3730,22 +3852,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (base inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - primary (link)</h4>
+			<div class="container-view">
+				<gov-button variant="primary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="primary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="primary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - primary (link inversed)</h4>
+			<div class="container-view gov-bg--primary-600">
+				<gov-button inverse variant="primary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Primary
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="primary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -3781,22 +3967,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="secondary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3804,22 +3990,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3859,22 +4045,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (outlined inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3914,22 +4100,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (base inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - secondary (link)</h4>
+			<div class="container-view">
+				<gov-button variant="secondary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="secondary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="secondary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - secondary (link inversed)</h4>
+			<div class="container-view gov-bg--secondary-800">
+				<gov-button inverse variant="secondary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Secondary
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="secondary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -3965,22 +4215,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="warning" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3988,22 +4238,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4043,22 +4293,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (outlined inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4098,22 +4348,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (base inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - warning (link)</h4>
+			<div class="container-view">
+				<gov-button variant="warning" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="warning" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="warning" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - warning (link inversed)</h4>
+			<div class="container-view gov-bg--warning-500">
+				<gov-button inverse variant="warning" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large warning
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="warning" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4149,22 +4463,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="success" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4172,22 +4486,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4227,22 +4541,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (outlined inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4282,22 +4596,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (base inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - success (link)</h4>
+			<div class="container-view">
+				<gov-button variant="success" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="success" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="success" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - success (link inversed)</h4>
+			<div class="container-view gov-bg--success-500">
+				<gov-button inverse variant="success" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large success
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="success" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="success" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4333,22 +4711,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="error" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4356,22 +4734,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4411,22 +4789,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (outlined inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4466,22 +4844,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (base inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - error (link)</h4>
+			<div class="container-view">
+				<gov-button variant="error" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="error" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="error" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - error (link inversed)</h4>
+			<div class="container-view gov-bg--error-400">
+				<gov-button inverse variant="error" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large error
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="error" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="error" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4702,7 +5144,7 @@ class ErrorPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Error</h2>
 		<gov-error-code>
-			<gov-icon slot="icon" name="400" type="complex"></gov-icon>
+			<gov-icon slot="icon" name="card-400" type="complex"></gov-icon>
 			<h2 class="gov-text--6xl">Page Not Found</h2>
 			<p class="gov-text--l">Sorry, the page you are looking for does not exist.</p>
 		</gov-error-code>
@@ -4793,15 +5235,24 @@ class FormsPage extends HTMLElement {
 				<option value="i" selected>Value I</option>
 			</gov-form-multi-select>
 			<br>
+			<gov-form-checkbox name="test-me-c" value="me" checked no-label></gov-form-checkbox>
+			<br>
+			<gov-form-radio name="superRadio2" value="me1" no-label></gov-form-radio>
+			<gov-form-radio name="superRadio2" value="me2" checked no-label></gov-form-radio>
+			<br>
+			<gov-form-switch name="test-me" value="me2" checked no-label></gov-form-switch>
+			<br>
 			<gov-form-checkbox name="test-me-c" value="me" checked>
 				<gov-form-label slot="label">Souhlasím</gov-form-label>
 			</gov-form-checkbox>
 			<br>
-			<gov-form-radio name="test1" value="me1">
+			<gov-form-radio name="superRadio" value="me1">
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<gov-form-radio name="superRadio" value="me2" checked>
 				<gov-form-label slot="label">Souhlasím</gov-form-label>
 			</gov-form-radio>
 			<br>
-			// TODO: Nepropisuje se ID inputu do labelu
 			<gov-form-switch name="test-me" value="me2" checked>
 				<gov-form-label slot="label">Souhlasím</gov-form-label>
 			</gov-form-switch>
@@ -4820,7 +5271,7 @@ class FormsPage extends HTMLElement {
 			<gov-form-control size="m">
 				<gov-form-group>
 					<gov-form-search name="test-me-c" value="me" checked>
-						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="s">
 							<gov-icon slot="left-icon" name="search"></gov-icon>
 						</gov-button>
@@ -4831,7 +5282,7 @@ class FormsPage extends HTMLElement {
 			<gov-form-control size="l">
 				<gov-form-group>
 					<gov-form-search name="test-me-c" value="me" checked>
-						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="m">
 							Hledat
 						</gov-button>
@@ -4842,7 +5293,7 @@ class FormsPage extends HTMLElement {
 			<gov-form-control size="xl">
 				<gov-form-group>
 					<gov-form-search name="test-me-c" value="me" checked variant="secondary">
-						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte" type="reset"></gov-form-input>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="secondary" size="l">
 							Hledat
 						</gov-button>
@@ -4904,7 +5355,7 @@ class FormsPage extends HTMLElement {
 						</gov-form-file>
 					</gov-form-group>
 					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 						Required
 					</gov-form-message>
 				</gov-form-control>
@@ -4969,7 +5420,7 @@ class FormsPage extends HTMLElement {
 						</gov-form-file>
 					</gov-form-group>
 					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 						Required
 					</gov-form-message>
 				</gov-form-control>
@@ -4993,7 +5444,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-multi-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5005,7 +5456,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5029,7 +5480,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5140,7 +5591,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5151,7 +5602,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5162,7 +5613,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5173,7 +5624,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5270,7 +5721,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5285,7 +5736,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5300,7 +5751,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5315,7 +5766,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5462,7 +5913,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5477,7 +5928,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5492,7 +5943,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5619,7 +6070,6 @@ class FormsPage extends HTMLElement {
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
-						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
@@ -5673,7 +6123,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5685,7 +6135,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5697,7 +6147,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5729,6 +6179,14 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+			<h3>
+				Password power
+			</h3>
+			<gov-form-password-power power="0"></gov-form-password-power>
+			<gov-form-password-power power="1">slabé</gov-form-password-power>
+			<gov-form-password-power power="2">střední</gov-form-password-power>
+			<gov-form-password-power power="3">silné</gov-form-password-power>
+
 			<h2>Switch</h2>
 			<h3>
 				Default
@@ -5754,6 +6212,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
+			
 			<gov-form-control size="l">
 				<gov-form-group>
 					<gov-form-switch name="test-me" value="me" checked>
@@ -5772,7 +6231,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5783,7 +6242,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5794,7 +6253,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5805,7 +6264,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -6439,8 +6898,9 @@ class PaginationPage extends HTMLElement {
     setTimeout(() => {
       const bagr = document.getElementById('bagr');
       if (bagr) {
-        bagr.addEventListener('gov-page', e => {
-          console.log(e);
+        bagr.addEventListener('gov-page', () => {
+          // console.log(e)
+          // bagr.setAttribute('current', String(e))
         });
       }
     }, 500);
@@ -6454,6 +6914,15 @@ class PaginationPage extends HTMLElement {
 		<gov-pagination type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
 		<br>
 		<gov-pagination type="select" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<br>
+		<gov-pagination variant="secondary" total="212" current="2" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination size="s" variant="secondary" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" variant="secondary" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" variant="secondary" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
 
 		`;
   }
@@ -6857,13 +7326,13 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper>
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 					<div slot="content">
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</div>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item collapsible="true" label="Krok s textem, obrázkem, tlačítkem" variant="primary" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 					<span slot="prefix">2</span>
@@ -6884,10 +7353,10 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper size="s">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
 					<span slot="prefix">2</span>
@@ -6908,10 +7377,10 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper size="xs">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
 					<span slot="prefix">2</span>
@@ -7327,6 +7796,45 @@ class TilesPage extends HTMLElement {
 					</p>
 				</gov-tile>
 			</gov-tiles>
+			<br>
+			<gov-tiles columns="3" no-border>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+			</gov-tiles>
 
 		</div>
 		`;
@@ -7555,7 +8063,7 @@ class ToastMessagePage extends HTMLElement {
 			Toast Message
 		</h2>
 		<gov-toast variant="success">
-			<gov-icon name="check" slot="icon"></gov-icon>
+			<gov-icon name="check-lg" slot="icon"></gov-icon>
 			<p>
 				Vaše dokumenty byly úspěšně staženy.
 			</p>
@@ -7602,7 +8110,7 @@ class ToastMessageCountdownPage extends HTMLElement {
 			Toast Message Countdown
 		</h2>
 		<gov-toast variant="success" type="solid">
-			<gov-icon name="check" slot="icon"></gov-icon>
+			<gov-icon name="check-lg" slot="icon"></gov-icon>
 			<p>
 				Vaše dokumenty byly úspěšně staženy.
 			</p>
@@ -7649,7 +8157,7 @@ class WizzardPage extends HTMLElement {
 			<div class="gov-bg--secondary-300" style="padding: 48px">
 				<gov-wizzard>
 					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" collapsible>
-						<gov-icon slot="prefix" name="check"></gov-icon>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7676,7 +8184,7 @@ class WizzardPage extends HTMLElement {
 
 				<gov-wizzard size="s">
 					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
-						<gov-icon slot="prefix" name="check"></gov-icon>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7701,7 +8209,7 @@ class WizzardPage extends HTMLElement {
 	
 				<gov-wizzard size="xs">
 					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
-						<gov-icon slot="prefix" name="check"></gov-icon>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>