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

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>
@@ -4904,7 +5346,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 +5411,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 +5435,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 +5447,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 +5471,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 +5582,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 +5593,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 +5604,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 +5615,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 +5712,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 +5727,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 +5742,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 +5757,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 +5904,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 +5919,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 +5934,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>
@@ -5673,7 +6115,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 +6127,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 +6139,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 +6171,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
@@ -5772,7 +6222,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 +6233,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 +6244,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 +6255,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 +6889,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 +6905,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 +7317,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 +7344,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 +7368,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 +7787,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 +8054,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 +8101,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 +8148,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 +8175,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 +8200,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>