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

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

@@ -2904,6 +2904,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">
@@ -2941,6 +2978,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>
@@ -3026,7 +3084,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">
@@ -3087,7 +3182,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>
@@ -3241,6 +3336,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">
@@ -3588,22 +3710,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>
@@ -3617,22 +3739,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 />
@@ -3672,22 +3794,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>
 
@@ -3726,22 +3848,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 />
@@ -3777,22 +3963,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 />
@@ -3800,22 +3986,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 />
@@ -3855,22 +4041,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 />
@@ -3910,22 +4096,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 />
@@ -3961,22 +4211,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 />
@@ -3984,22 +4234,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 />
@@ -4039,22 +4289,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 />
@@ -4094,22 +4344,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 />
@@ -4145,22 +4459,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 />
@@ -4168,22 +4482,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 />
@@ -4223,22 +4537,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 />
@@ -4278,22 +4592,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 />
@@ -4329,22 +4707,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 />
@@ -4352,22 +4730,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 />
@@ -4407,22 +4785,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 />
@@ -4462,22 +4840,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 />
@@ -4698,7 +5140,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>
@@ -4789,15 +5231,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>
@@ -4816,7 +5267,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>
@@ -4827,7 +5278,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>
@@ -4838,7 +5289,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>
@@ -4900,7 +5351,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>
@@ -4965,7 +5416,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>
@@ -4989,7 +5440,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>
@@ -5001,7 +5452,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>
@@ -5025,7 +5476,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>
@@ -5136,7 +5587,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>
@@ -5147,7 +5598,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>
@@ -5158,7 +5609,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>
@@ -5169,7 +5620,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>
@@ -5266,7 +5717,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>
@@ -5281,7 +5732,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>
@@ -5296,7 +5747,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>
@@ -5311,7 +5762,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>
@@ -5458,7 +5909,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>
@@ -5473,7 +5924,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>
@@ -5488,7 +5939,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>
@@ -5615,7 +6066,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>
@@ -5669,7 +6119,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>
@@ -5681,7 +6131,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>
@@ -5693,7 +6143,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>
@@ -5725,6 +6175,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
@@ -5750,6 +6208,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>
@@ -5768,7 +6227,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>
@@ -5779,7 +6238,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>
@@ -5790,7 +6249,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>
@@ -5801,7 +6260,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>
@@ -6435,8 +6894,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);
@@ -6450,6 +6910,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>
 
 		`;
   }
@@ -6853,13 +7322,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>
@@ -6880,10 +7349,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>
@@ -6904,10 +7373,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>
@@ -7323,6 +7792,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>
 		`;
@@ -7551,7 +8059,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>
@@ -7598,7 +8106,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>
@@ -7645,7 +8153,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>
@@ -7672,7 +8180,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>
@@ -7697,7 +8205,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>