Get started
Quick start
If you'd like to start exploring PatternFly Elements right away, checkout our Quick start demo page.
Install PatternFly Elements
Depending on the tool you use to manage dependencies (npm, yarn, etc.) use the command line to install the components you’d like as a dependency of your project like this:
npm install --save @patternfly/elements
This will install not only the web components, but also the core utilities and styles, and will save it to your package.json.
Include PatternFly Elements JavaScript
There are a few options for including PatternFly Elements into your site or app.
In JavaScript modules
Include the PatternFly Element web component and its dependencies within the app. When using a bundler such as esbuild or rollup with @rollup/plugin-node-resolve, use bare module specifiers to import the components.
import '@patternfly/elements/pf-card/pf-card.js';
In HTML
Alternatively, to load the PatternFly Elements web components in HTML you will need to use an importmap type script tag:
<script type="importmap"> ... </script>
and module type script tag <script type="module"> ... </script>
.
In this example, we load the card modules using an importmap from JSPM.
<!-- Generated by @jspm/generator - https://github.com/jspm/generator -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"@patternfly/elements/pf-card/pf-card.js": "https://ga.jspm.io/npm:@patternfly/elements@4.0.1/pf-card/pf-card.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/decorators/",
"@patternfly/pfe-core/controllers/slot-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/slot-controller.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/",
"lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
}
}
}
</script>
<script type="module">
import "@patternfly/elements/pf-card/pf-card.js";
</script>
To learn more about how to create importmaps, read our creating an import map section, and go into more detail at developer.mozilla.org or the import map specification.
Add PatternFly Elements markup
When you have the import map script loaded on the page, you can add a card component using html.
<pf-card>
<h3 slot="header">Card header</h3>
<p>This is the pf-card body.</p>
<pf-button slot="footer">OK</pf-button>
</pf-card>
Card header
This is the pf-card body.
Importmap and Markup
Altogether your import map code could look something like this Lit Playground Demo.
Add attributes
Attributes can be used to adjust a theme, a palette color, a priority, set default values, etc. Be sure to check out the "Attributes" section for each component to see which attributes are available.
<pf-card rounded>
<h3 slot="header">Card header</h3>
<p>This is the pf-card body.</p>
<pf-button slot="footer">OK</pf-button>
</pf-card>
Card header
This is the pf-card body.
Use CSS variables to customize or theme your components
CSS variables are subject to the normal cascade, so consider where you want these overrides to propagate.
Page-level CSS, theme variables
Theme variables will impact all components on the page where this CSS is loaded.
/* your-page.css */
:root {
--pf-c-card--BackgroundColor: var(--pf-global--active-color--200, #bee1f4);
}
Card header
This is the pf-card body.
Avoiding the flash of unstyled content (FOUC)
To hide undefined elements until they've upgraded, use the :defined
pseudo-class. You can set elements which are :not(:defined)
to be
transparent, and make them fully opaque in a <noscript>
style.
In this example, we load PatternFly elements from
https://jspm.dev
.
Replace the URLs with a CDN of your choice or locally-bundled files, depending on your needs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PatternFly Elements - Avoiding the FOUC</title>
<style>
:root {
--reveal-delay: 1s;
--reveal-duration: 0.2s;
}
pf-card {
opacity: 1;
transition: opacity var(--reveal-duration) ease var(--reveal-delay);
}
pf-card:not(:defined) {
opacity: 0;
}
</style>
<!-- Add noscript styles to immediately reveal content when JavaScript is disabled -->
<noscript>
<style>
pf-card:not(:defined) {
opacity: 1;
}
</style>
</noscript>
<script type="module" src="https://jspm.dev/@patternfly/elements/pf-card/pf-card.js"></script>
</head>
<body>
<pf-card>
<h1 slot="header">No FOUC</h1>
<p>Content will remain hidden until component definitions are loaded.</p>
</pf-card>
</body>
</html>