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

package/dist/collection/pages/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/pages/Banner.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmQhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class BannerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<div style=\"max-width: 1152px;\">\n\t\t<h2>Size XL</h2>\n\t\t<gov-banner size=\"xl\" text-color=\"dark\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-xl.jpg\" slot=\"image\" width=\"1200\" height=\"662\" />\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Waves</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Stripes</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Lines</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Simple</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"image\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"logo\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"icon\">\n\t\t\t<span slot=\"headline\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<span slot=\"button\">Zjistit více</span>\n\t\t</gov-banner>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"banner-page\") === undefined) {\n\tcustomElements.define(\"banner-page\", BannerPage)\n}\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/pages/Banner.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmQhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class BannerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Size XL</h2>\n\t\t<gov-banner size=\"xl\" text-color=\"dark\" aria-labelledby=\"banner001\">\n\t\t\t<span slot=\"headline\" id=\"banner001\">Lorem ipsum dolor sit</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"xl\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-xl.jpg\" slot=\"image\" width=\"1200\" height=\"662\" />\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<div style=\"max-width: 1152px;\">\n\t\t<h2>Waves</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner002\">\n\t\t\t<span slot=\"headline\" id=\"banner002\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner003\">\n\t\t\t<span slot=\"headline\" id=\"banner003\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner004\">\n\t\t\t<span slot=\"headline\" id=\"banner004\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner005\">\n\t\t\t<span slot=\"headline\" id=\"banner005\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner006\">\n\t\t\t<span slot=\"headline\" id=\"banner006\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner007\">\n\t\t\t<span slot=\"headline\" id=\"banner007\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"image\" aria-labelledby=\"banner008\">\n\t\t\t<span slot=\"headline\" id=\"banner008\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"logo\" aria-labelledby=\"banner009\">\n\t\t\t<span slot=\"headline\" id=\"banner009\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"waves\" foreground=\"icon\" aria-labelledby=\"banner010\">\n\t\t\t<span slot=\"headline\" id=\"banner010\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Stripes</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner011\">\n\t\t\t<span slot=\"headline\" id=\"banner011\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner012\">\n\t\t\t<span slot=\"headline\" id=\"banner012\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner013\">\n\t\t\t<span slot=\"headline\" id=\"banner013\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner014\">\n\t\t\t<span slot=\"headline\" id=\"banner014\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner015\">\n\t\t\t<span slot=\"headline\" id=\"banner015\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner016\">\n\t\t\t<span slot=\"headline\" id=\"banner016\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"image\" aria-labelledby=\"banner017\">\n\t\t\t<span slot=\"headline\" id=\"banner017\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-square.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"logo\" aria-labelledby=\"banner018\">\n\t\t\t<span slot=\"headline\" id=\"banner018\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"stripes\" foreground=\"icon\" aria-labelledby=\"banner019\">\n\t\t\t<span slot=\"headline\" id=\"banner019\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Lines</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner020\">\n\t\t\t<span slot=\"headline\" id=\"banner020\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner021\">\n\t\t\t<span slot=\"headline\" id=\"banner021\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner022\">\n\t\t\t<span slot=\"headline\" id=\"banner022\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner023\">\n\t\t\t<span slot=\"headline\" id=\"banner023\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner024\">\n\t\t\t<span slot=\"headline\" id=\"banner024\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner025\">\n\t\t\t<span slot=\"headline\" id=\"banner025\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"image\" aria-labelledby=\"banner026\">\n\t\t\t<span slot=\"headline\" id=\"banner026\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"logo\" aria-labelledby=\"banner027\">\n\t\t\t<span slot=\"headline\" id=\"banner027\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"lines\" foreground=\"icon\" aria-labelledby=\"banner028\">\n\t\t\t<span slot=\"headline\" id=\"banner028\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br><br>\n\n\t\t<h2>Simple</h2>\n\t\t<h3>Size L</h3>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner029\">\n\t\t\t<span slot=\"headline\" id=\"banner029\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-l.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner030\">\n\t\t\t<span slot=\"headline\" id=\"banner030\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"l\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner031\">\n\t\t\t<span slot=\"headline\" id=\"banner031\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size M</h3>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner032\">\n\t\t\t<span slot=\"headline\" id=\"banner032\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-m.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner033\">\n\t\t\t<span slot=\"headline\" id=\"banner033\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"m\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner034\">\n\t\t\t<span slot=\"headline\" id=\"banner034\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<h3>Size S</h3>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"image\" aria-labelledby=\"banner035\">\n\t\t\t<span slot=\"headline\" id=\"banner035\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t\t<img src=\"./assets/banner/image-s.jpg\" slot=\"image\" />\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"logo\" aria-labelledby=\"banner036\">\n\t\t\t<span slot=\"headline\" id=\"banner036\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t<br>\n\t\t<gov-banner size=\"s\" background=\"simple\" foreground=\"icon\" aria-labelledby=\"banner037\">\n\t\t\t<span slot=\"headline\" id=\"banner037\">Lorem ipsum dolor sit amet.</span>\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p>\n\t\t\t<gov-button slot=\"button\" href=\"#\" color=\"secondary\" type=\"solid\" size=\"l\">Zjistit více</gov-button>\n\t\t</gov-banner>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"banner-page\") === undefined) {\n\tcustomElements.define(\"banner-page\", BannerPage)\n}\n"]}

package/dist/collection/pages/Blockquote.js

@@ -2,18 +2,18 @@ class BlockquotePage extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
 		<gov-blockquote cite="https://example.com" type="primary">
-			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>
+			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href="#" target="_blank">facilisis augue</a>.</p>
 			<img slot="image" src="./assets/author.png" alt="" width="32" height="32" />
 			<p slot="author">Confucius, <cite>Lorem sipsim</cite></p>
 		</gov-blockquote>
 		<br>
 		<gov-blockquote cite="https://example.com" type="subtle">
-			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>
+			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href="#" target="_blank">facilisis augue</a>.</p>
 			<p slot="author">Confucius, <cite>Lorem sipsim</cite></p>
 		</gov-blockquote>
 		<br>
 		<gov-blockquote cite="https://example.com" type="neutral">
-			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>
+			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href="#" target="_blank">facilisis augue</a>.</p>
 		</gov-blockquote>
 
 		`;

package/dist/collection/pages/Blockquote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.js","sourceRoot":"","sources":["../../../../../src/pages/Blockquote.ts"],"names":[],"mappings":"AAAA,MAAM,cAAe,SAAQ,WAAW;IACvC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;GAgBhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAA;AACzD,CAAC","sourcesContent":["class BlockquotePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"primary\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>\n\t\t\t<img slot=\"image\" src=\"./assets/author.png\" alt=\"\" width=\"32\" height=\"32\" />\n\t\t\t<p slot=\"author\">Confucius, <cite>Lorem sipsim</cite></p>\n\t\t</gov-blockquote>\n\t\t<br>\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"subtle\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>\n\t\t\t<p slot=\"author\">Confucius, <cite>Lorem sipsim</cite></p>\n\t\t</gov-blockquote>\n\t\t<br>\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"neutral\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue.</p>\n\t\t</gov-blockquote>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"blockquote-page\") === undefined) {\n\tcustomElements.define(\"blockquote-page\", BlockquotePage)\n}\n"]}
+{"version":3,"file":"Blockquote.js","sourceRoot":"","sources":["../../../../../src/pages/Blockquote.ts"],"names":[],"mappings":"AAAA,MAAM,cAAe,SAAQ,WAAW;IACvC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;GAgBhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAA;AACzD,CAAC","sourcesContent":["class BlockquotePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"primary\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href=\"#\" target=\"_blank\">facilisis augue</a>.</p>\n\t\t\t<img slot=\"image\" src=\"./assets/author.png\" alt=\"\" width=\"32\" height=\"32\" />\n\t\t\t<p slot=\"author\">Confucius, <cite>Lorem sipsim</cite></p>\n\t\t</gov-blockquote>\n\t\t<br>\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"subtle\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href=\"#\" target=\"_blank\">facilisis augue</a>.</p>\n\t\t\t<p slot=\"author\">Confucius, <cite>Lorem sipsim</cite></p>\n\t\t</gov-blockquote>\n\t\t<br>\n\t\t<gov-blockquote cite=\"https://example.com\" type=\"neutral\">\n\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum <a href=\"#\" target=\"_blank\">facilisis augue</a>.</p>\n\t\t</gov-blockquote>\n\n\t\t`\n\t}\n}\n\nif (customElements.get(\"blockquote-page\") === undefined) {\n\tcustomElements.define(\"blockquote-page\", BlockquotePage)\n}\n"]}

package/dist/collection/pages/Card.js

@@ -6,28 +6,33 @@ class CardPage extends HTMLElement {
 			<h2>Card</h2>
 
 			<h3>Vertical</h3>
-			<gov-card>
-				<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="800" height="533">
-				<p><b>Commodo consequat.</b></p>
-				<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>
-				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
-					Jak založit
-				</gov-button>
-				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
-					Zjistit více
-				</gov-button>
-			</gov-card>
+			<div style="max-width: 350px;">
+				<gov-card>
+					<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="350" height="234">
+					<p><b>Commodo consequat.</b></p>
+					<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href="#">tellus@quis.id</a>.</p>
+					<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
+						Jak založit
+					</gov-button>
+					<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
+						Zjistit více
+					</gov-button>
+				</gov-card>
+				<br>
+				<gov-card href="http://localhost:3333/button">
+					<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="350" height="234">
+					<p><b>Commodo consequat.</b></p>
+					<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href="#">tellus@quis.id</a>.</p>
+				</gov-card>
+			</div>
 			<br>
-			<gov-card>
+			<gov-card href="http://localhost:3333/button">
 				<gov-icon slot="icon" name="car" type="complex" color="primary"></gov-icon>
 				<h4>Fusce tellus odio, dapibus id fermentum quis</h4>
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
-				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
-					Learn more
-				</gov-button>
 			</gov-card>
 			<br>
-			<gov-card collapsible>
+			<gov-card  href="http://localhost:3333/button" collapsible>
 				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
 				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
@@ -37,8 +42,13 @@ class CardPage extends HTMLElement {
 			</gov-card>
 			<br>
 			<h3>Horizontal</h3>
+			<gov-card direction="horizontal" href="http://localhost:3333/button">
+				<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="235" height="144">
+				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
+			</gov-card>
+			<br>
 			<gov-card direction="horizontal">
-				<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="800" height="533">
+				<img slot="img" src="./assets/documents.jpg" alt="Obrázek" width="235" height="144">
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
 				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more

package/dist/collection/pages/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"max-width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<h3>Vertical</h3>\n\t\t\t<gov-card>\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"800\" height=\"533\">\n\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Fusce tellus odio, dapibus id fermentum quis</h4>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card collapsible>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"800\" height=\"533\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"max-width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<h3>Vertical</h3>\n\t\t\t<div style=\"max-width: 350px;\">\n\t\t\t\t<gov-card>\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tJak založit\n\t\t\t\t\t</gov-button>\n\t\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tZjistit více\n\t\t\t\t\t</gov-button>\n\t\t\t\t</gov-card>\n\t\t\t\t<br>\n\t\t\t\t<gov-card href=\"http://localhost:3333/button\">\n\t\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"350\" height=\"234\">\n\t\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus. Cras elementum <a href=\"#\">tellus@quis.id</a>.</p>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card href=\"http://localhost:3333/button\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Fusce tellus odio, dapibus id fermentum quis</h4>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card  href=\"http://localhost:3333/button\" collapsible>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-card direction=\"horizontal\" href=\"http://localhost:3333/button\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"./assets/documents.jpg\" alt=\"Obrázek\" width=\"235\" height=\"144\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}

package/dist/collection/pages/Forms.js

@@ -125,6 +125,7 @@ class FormsPage extends HTMLElement {
 	<li><a href="#checkbox">Checkbox</a></li>
 	<li><a href="#radio">Radio</a></li>
 	<li><a href="#switch">Switch</a></li>
+	<li><a href="#range">Range</a></li>
 </ul>
 
 <br><br>
@@ -634,7 +635,7 @@ class FormsPage extends HTMLElement {
 	<gov-form-group>
 		<gov-form-search name="test-me-c" value="me" size="s" color="primary">
 			<gov-form-input slot="input" name="test-me" size="s" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button" size="s" color="primary" type="solid">
+			<gov-button slot="button" size="xs" color="primary" type="solid">
 				Hledat
 			</gov-button>
 		</gov-form-search>
@@ -645,7 +646,7 @@ class FormsPage extends HTMLElement {
 	<gov-form-group>
 		<gov-form-search name="test-me-c" value="me" checked size="m" color="primary">
 			<gov-form-input slot="input" size="m" name="test-me" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button" color="primary" size="m" type="solid">
+			<gov-button slot="button" color="primary" size="s" type="solid">
 				Hledat
 			</gov-button>
 		</gov-form-search>
@@ -656,10 +657,10 @@ class FormsPage extends HTMLElement {
 	<gov-form-group>
 		<gov-form-search name="test-me-c" value="me" size="l" color="neutral">
 			<gov-form-input slot="input" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button-erase" size="l" color="neutral" type="base">
+			<gov-button slot="button-erase" size="m" color="neutral" type="base">
 				<gov-icon slot="icon-start" name="x"></gov-icon>
 			</gov-button>
-			<gov-button slot="button" size="l" color="neutral" type="solid">
+			<gov-button slot="button" size="m" color="neutral" type="solid">
 				<gov-icon slot="icon-start" name="search"></gov-icon>
 			</gov-button>
 		</gov-form-search>
@@ -2077,6 +2078,210 @@ class FormsPage extends HTMLElement {
 <gov-theme-switch size="l" display-label="true"></gov-theme-switch>
 <br>
 <gov-theme-switch size="xl" display-label="true"></gov-theme-switch>
+
+
+<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
+<h2 id="range">Range</h2>
+<h3>S</h3>
+<gov-form-control>
+	<gov-form-label size="s" for="range1">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="s" min="0" max="100" step="25" value="50" name="range1" tooltip list-identifier="list2">
+			<div role="listbox" id="list2" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-label size="s" for="range2">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="s" min="0" max="100" step="25" value="50" name="range2" list-identifier="list3" input>
+			<div role="listbox" id="list3" slot="datalist" data-list>
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<h3>M</h3>
+<gov-form-control>
+	<gov-form-label size="m" for="range3">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="5" value="30" name="range3" tooltip list-identifier="list2">
+			<div role="listbox" id="list2" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-label size="m" for="range4">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="5" value="30" name="range4" list-identifier="list3" input>
+			<div role="listbox" id="list3" slot="datalist" data-vertical="true">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<h3>L</h3>
+<gov-form-control>
+	<gov-form-label size="l" for="range5">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="l" min="0" max="100" value="84" name="range5" tooltip list-identifier="list2">
+			<div role="listbox" id="list2" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+<gov-form-control>
+	<gov-form-label size="l" for="range6">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="l" min="0" max="100" value="84" name="range6" list-identifier="list3" input>
+			<div role="listbox" id="list3" slot="datalist" data-vertical="1">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<br><br>
+<gov-form-range size="m" min="10" max="150" step="10" value="80"></gov-form-range>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range7">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="1000" max="15000" step="1000" value="1000" name="range7" tooltip></gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range8">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="10" max="150" step="10" value="100" name="range8" tooltip>
+			<p slot="prefix">Min</p>
+			<p slot="sufix">Max</p>
+		</gov-form-range>
+	</gov-form-group>
+	<gov-form-message slot="bottom" color="neutral" size="s">
+		Message
+	</gov-form-message>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range9">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range9" tooltip list-identifier="list">
+			<div role="listbox" id="list" slot="datalist" data-vertical>
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range10">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range10" tooltip list-identifier="list2">
+			<div role="listbox" id="list2" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range11">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="10" max="150" step="10" value="100" name="range11" input></gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range12">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range12" list-identifier="list3" input>
+			<div role="listbox" id="list3" slot="datalist" data-vertical>
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range13">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range13" list-identifier="list4" input invalid="true">
+			<div role="listbox" id="list4" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+	<gov-form-message slot="bottom" color="error" size="s">
+		<gov-icon slot="icon" name="exclamation-lg"></gov-icon>
+		Message
+	</gov-form-message>
+</gov-form-control>
+
+<gov-form-control>
+	<gov-form-label size="m" for="range14">Label</gov-form-label>
+	<gov-form-group>
+		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range14" list-identifier="list4" tooltip input disabled="true">
+			<div role="listbox" id="list4" slot="datalist">
+				<span role="listitem" data-value="0">Option</span>
+				<span role="listitem" data-value="25">Option</span>
+				<span role="listitem" data-value="50">Option</span>
+				<span role="listitem" data-value="75">Option</span>
+				<span role="listitem" data-value="100">Option</span>
+			</div>
+		</gov-form-range>
+	</gov-form-group>
+</gov-form-control>
 		`;
     }
 }