flex-direction: row;
}
- .gallery pfe-card {
+ .gallery pf-card {
margin: 1rem;
}
</style>
</head>
-<script type="module" src="https://unpkg.com/@patternfly/pfe-card@next?module"></script>
-<script type="module" src="https://unpkg.com/@patternfly/pfe-button@next?module"></script>
+<script type="module" src="https://esm.sh/@patternfly/elements/pf-button/pf-button.js"></script>
+<script type="module" src="https://esm.sh/@patternfly/elements/pf-card/pf-card.js"></script>
+<script type="module" src="https://esm.sh/@patternfly/elements/pf-icon/pf-icon.js"></script>
<body>
<h1>PatternFly Elements CDN example</h1>
<div class="gallery">
- <pfe-card>
- <h2 slot="header">PF Card</h2>
+ <pf-card>
+ <h3 slot="header">PF Card</h3>
<p>Some info here.</p>
<p slot="footer">Footer here...</p>
- </pfe-card>
- <pfe-card>
- <h2 slot="header">Another Card</h2>
+ </pf-card>
+ <pf-card>
+ <h3 slot="header">Another Card</h2>
<p>BlaBla</p>
- </pfe-card>
+ </pf-card>
</div>
-<pfe-icon icon="rh-cloud"></pfe-icon>
+<pf-icon icon="rh-cloud" size="lg"></pf-icon>
-<pfe-button> <!-- icon="rh-cloud" doesn't work -->
- <button id="do_something">Do something!</button>
-</pfe-button>
+<pf-button id="do_something">Do something!</pf-button>
<script>
const button_do = document.getElementById("do_something");
projects / webcomponents.git / commitdiff