@gov-design-system-ce/components 4.2.0 → 4.2.1

package/dist/collection/data/font-definitions.js

@@ -1,94 +1,132 @@
 export const fonts = [
 	{
-		name: 'X-Small',
+		name: 'display-l',
 		description:
-			'The font size denoted as X-Small, which exclusively finds its usage in the mobile applications designed for iOS and Android platforms.',
-		size: 'xs',
+			'Display fonts are used for large text to grab attention, such as titles or important data.',
+		size: 'display-l',
 		definitions: {
-			px: '12px',
-			rem: '0.75rem',
+			px: '56px',
+			rem: '3.5rem',
 		},
 	},
 	{
-		name: 'Small',
+		name: 'display-m',
 		description:
-			'The utilization of the Small font size should be limited to a certain extent, particularly for annotations, descriptions, and other comparable content.',
-		size: 's',
+			'Display fonts are used for large text to grab attention, such as titles or important data.',
+		size: 'display-m',
 		definitions: {
-			px: '14px',
-			rem: '0.875rem',
+			px: '48px',
+			rem: '3rem',
 		},
 	},
 	{
-		name: 'Medium',
-		description: 'The body text is typically rendered using the Medium font size.',
-		size: 'm',
+		name: 'display-s',
+		description:
+			'Display fonts are used for large text to grab attention, such as titles or important data.',
+		size: 'display-s',
 		definitions: {
-			px: '16px',
-			rem: '1rem',
+			px: '40px',
+			rem: '2.5rem',
 		},
 	},
 	{
-		name: 'Large',
-		description: 'The Large font size is employed for creating small sub-headings',
-		size: 'l',
+		name: 'headline-xl',
+		description:
+			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
+		size: 'headline-xl',
 		definitions: {
-			px: '18px',
-			rem: '1.125rem',
+			px: '40px',
+			rem: '2.5rem',
 		},
 	},
 	{
-		name: 'X-Large',
-		description: 'When creating large sub-headings, the X-Large font size is typically utilized.',
-		size: 'xl',
+		name: 'headline-l',
+		description:
+			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
+		size: 'headline-l',
 		definitions: {
-			px: '20px',
-			rem: '1.25rem',
+			px: '32px',
+			rem: '2rem',
 		},
 	},
 	{
-		name: '2X-Large',
-		description: 'The primary heading on tablet-sized devices is generally displayed using the XX-Large font size.',
-		size: '2xl',
+		name: 'headline-m',
+		description:
+			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
+		size: 'headline-m',
 		definitions: {
 			px: '24px',
 			rem: '1.5rem',
 		},
 	},
 	{
-		name: '3X-Large',
-		description: 'On desktop devices, the main heading is commonly presented in the XXX-Large font size.',
-		size: '3xl',
+		name: 'headline-s',
+		description:
+			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
+		size: 'headline-s',
 		definitions: {
-			px: '32px',
-			rem: '2rem',
+			px: '20px',
+			rem: '1.25rem',
 		},
 	},
 	{
-		name: '4x-Large',
-		description: 'The usage of the XXXX-Large font size is primarily reserved for marketing purposes and banners.',
-		size: '4xl',
+		name: 'headline-xs',
+		description:
+			'Headline fonts are used for shorter text like headings, providing emphasis and readability.',
+		size: 'headline-xs',
 		definitions: {
-			px: '40px',
-			rem: '2.5rem',
+			px: '18px',
+			rem: '1.125rem',
 		},
 	},
 	{
-		name: '5X-Large',
-		description: null,
-		size: '5xl',
+		name: 'body-xl',
+		description:
+			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
+		size: 'body-xl',
 		definitions: {
-			px: '48px',
-			rem: '3rem',
+			px: '20px',
+			rem: '1.25rem',
+		},
+	},
+	{
+		name: 'body-l',
+		description:
+			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
+		size: 'body-l',
+		definitions: {
+			px: '18px',
+			rem: '1.125rem',
+		},
+	},
+	{
+		name: 'body-m',
+		description:
+			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
+		size: 'body-m',
+		definitions: {
+			px: '16px',
+			rem: '1rem',
 		},
 	},
 	{
-		name: '6X-Large',
-		description: null,
-		size: '6xl',
+		name: 'body-s',
+		description:
+			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
+		size: 'body-s',
 		definitions: {
-			px: '58px',
-			rem: '3.625rem',
+			px: '14px',
+			rem: '0.875rem',
+		},
+	},
+	{
+		name: 'body-xs',
+		description:
+			'Body fonts are used for longer text, ensuring clarity and consistency, and can include bolding for emphasis.',
+		size: 'body-xs',
+		definitions: {
+			px: '12px',
+			rem: '0.75rem',
 		},
 	},
 ];

package/dist/collection/pages/Banner.js

@@ -1,261 +1,261 @@
 class BannerPage extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
-		<div style="max-width: 1152px;">
 		<h2>Size XL</h2>
-		<gov-banner size="xl" text-color="dark">
-			<span slot="headline">Lorem ipsum dolor sit</span>
+		<gov-banner size="xl" text-color="dark" aria-labelledby="banner001">
+			<span slot="headline" id="banner001">Lorem ipsum dolor sit</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="xl">Zjistit více</gov-button>
 			<img src="./assets/banner/image-xl.jpg" slot="image" width="1200" height="662" />
 		</gov-banner>
 		<br><br>
 
+		<div style="max-width: 1152px;">
 		<h2>Waves</h2>
 		<h3>Size L</h3>
-		<gov-banner size="l" background="waves" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="waves" foreground="image" aria-labelledby="banner002">
+			<span slot="headline" id="banner002">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-l.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="waves" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="waves" foreground="logo" aria-labelledby="banner003">
+			<span slot="headline" id="banner003">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="waves" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="waves" foreground="icon" aria-labelledby="banner004">
+			<span slot="headline" id="banner004">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size M</h3>
-		<gov-banner size="m" background="waves" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="waves" foreground="image" aria-labelledby="banner005">
+			<span slot="headline" id="banner005">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-m.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="waves" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="waves" foreground="logo" aria-labelledby="banner006">
+			<span slot="headline" id="banner006">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="waves" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="waves" foreground="icon" aria-labelledby="banner007">
+			<span slot="headline" id="banner007">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size S</h3>
-		<gov-banner size="s" background="waves" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="waves" foreground="image" aria-labelledby="banner008">
+			<span slot="headline" id="banner008">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-s.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="waves" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="waves" foreground="logo" aria-labelledby="banner009">
+			<span slot="headline" id="banner009">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="waves" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="waves" foreground="icon" aria-labelledby="banner010">
+			<span slot="headline" id="banner010">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br><br>
 
 		<h2>Stripes</h2>
 		<h3>Size L</h3>
-		<gov-banner size="l" background="stripes" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="stripes" foreground="image" aria-labelledby="banner011">
+			<span slot="headline" id="banner011">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-square.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="stripes" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="stripes" foreground="logo" aria-labelledby="banner012">
+			<span slot="headline" id="banner012">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="stripes" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="stripes" foreground="icon" aria-labelledby="banner013">
+			<span slot="headline" id="banner013">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size M</h3>
-		<gov-banner size="m" background="stripes" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="stripes" foreground="image" aria-labelledby="banner014">
+			<span slot="headline" id="banner014">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-square.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="stripes" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="stripes" foreground="logo" aria-labelledby="banner015">
+			<span slot="headline" id="banner015">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="stripes" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="stripes" foreground="icon" aria-labelledby="banner016">
+			<span slot="headline" id="banner016">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size S</h3>
-		<gov-banner size="s" background="stripes" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="stripes" foreground="image" aria-labelledby="banner017">
+			<span slot="headline" id="banner017">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-square.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="stripes" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="stripes" foreground="logo" aria-labelledby="banner018">
+			<span slot="headline" id="banner018">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="stripes" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="stripes" foreground="icon" aria-labelledby="banner019">
+			<span slot="headline" id="banner019">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br><br>
 
 		<h2>Lines</h2>
 		<h3>Size L</h3>
-		<gov-banner size="l" background="lines" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="lines" foreground="image" aria-labelledby="banner020">
+			<span slot="headline" id="banner020">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-l.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="lines" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="lines" foreground="logo" aria-labelledby="banner021">
+			<span slot="headline" id="banner021">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="lines" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="lines" foreground="icon" aria-labelledby="banner022">
+			<span slot="headline" id="banner022">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size M</h3>
-		<gov-banner size="m" background="lines" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="lines" foreground="image" aria-labelledby="banner023">
+			<span slot="headline" id="banner023">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-m.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="lines" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="lines" foreground="logo" aria-labelledby="banner024">
+			<span slot="headline" id="banner024">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="lines" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="lines" foreground="icon" aria-labelledby="banner025">
+			<span slot="headline" id="banner025">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size S</h3>
-		<gov-banner size="s" background="lines" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="lines" foreground="image" aria-labelledby="banner026">
+			<span slot="headline" id="banner026">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-s.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="lines" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="lines" foreground="logo" aria-labelledby="banner027">
+			<span slot="headline" id="banner027">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="lines" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="lines" foreground="icon" aria-labelledby="banner028">
+			<span slot="headline" id="banner028">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br><br>
 
 		<h2>Simple</h2>
 		<h3>Size L</h3>
-		<gov-banner size="l" background="simple" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="simple" foreground="image" aria-labelledby="banner029">
+			<span slot="headline" id="banner029">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-l.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="simple" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="simple" foreground="logo" aria-labelledby="banner030">
+			<span slot="headline" id="banner030">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="l" background="simple" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="l" background="simple" foreground="icon" aria-labelledby="banner031">
+			<span slot="headline" id="banner031">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size M</h3>
-		<gov-banner size="m" background="simple" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="simple" foreground="image" aria-labelledby="banner032">
+			<span slot="headline" id="banner032">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-m.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="simple" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="simple" foreground="logo" aria-labelledby="banner033">
+			<span slot="headline" id="banner033">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="m" background="simple" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="m" background="simple" foreground="icon" aria-labelledby="banner034">
+			<span slot="headline" id="banner034">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
 		<h3>Size S</h3>
-		<gov-banner size="s" background="simple" foreground="image">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="simple" foreground="image" aria-labelledby="banner035">
+			<span slot="headline" id="banner035">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 			<img src="./assets/banner/image-s.jpg" slot="image" />
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="simple" foreground="logo">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="simple" foreground="logo" aria-labelledby="banner036">
+			<span slot="headline" id="banner036">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		<br>
-		<gov-banner size="s" background="simple" foreground="icon">
-			<span slot="headline">Lorem ipsum dolor sit amet.</span>
+		<gov-banner size="s" background="simple" foreground="icon" aria-labelledby="banner037">
+			<span slot="headline" id="banner037">Lorem ipsum dolor sit amet.</span>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>
-			<span slot="button">Zjistit více</span>
+			<gov-button slot="button" href="#" color="secondary" type="solid" size="l">Zjistit více</gov-button>
 		</gov-banner>
 		</div>