Add PatternFly Elements CDN demo
[webcomponents.git] / patternfly-cdn.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <title>PatternFly Elements CDN example</title>
5   <meta charset="utf-8">
6
7   <style>
8     .gallery {
9       display: flex;
10       flex-direction: row;
11     }
12
13     .gallery pfe-card {
14       margin: 1rem;
15     }
16   </style>
17 </head>
18
19 <script type="module" src="https://unpkg.com/@patternfly/pfe-card@next?module"></script>
20 <script type="module" src="https://unpkg.com/@patternfly/pfe-button@next?module"></script>
21
22 <body>
23
24 <h1>PatternFly Elements CDN example</h1>
25
26 <div class="gallery">
27   <pfe-card>
28     <h2 slot="header">PF Card</h2>
29     <p>Some info here.</p>
30     <p slot="footer">Footer here...</p>
31   </pfe-card>
32   <pfe-card>
33     <h2 slot="header">Another Card</h2>
34     <p>BlaBla</p>
35   </pfe-card>
36 </div>
37
38 <pfe-icon icon="rh-cloud"></pfe-icon>
39
40 <pfe-button> <!-- icon="rh-cloud" doesn't work -->
41   <button id="do_something">Do something!</button>
42 </pfe-button>
43
44 <script>
45 const button_do = document.getElementById("do_something");
46 button_do.addEventListener("click", () => alert("clicked"));
47 </script>
48
49 </body>
50 </html>