PatternFly Elements - Home PatternFly Elements v2 prerelease v1

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/pfe-card@next

This will install not only the pfe-card, but also the core utilities and styles, and will save it to your package-lock.json.

Include PatternFly Elements JavaScript

There are a few options for including PatternFly Elements into your site or app.

In HTML

You may load the JavaScript via <script type="module">. List out all the components you may include on your page, and the browser will fetch the dependencies dynamically on load. Learn more about JavaScript modules.

In this example, we load the card modules from https://unpkg.com.

<script type="module" src="https://unpkg.com/@patternfly/pfe-card@next?module"></script>

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/pfe-card';

Add PatternFly Elements markup

Add a card component.

<pfe-card>
  <h3 slot="header">Card header</h3>
  <p>This is the pfe-card body.</p>
  <div slot="footer">
    <p>This is the footer</p>
  </div>
</pfe-card>

Card header

This is the pfe-card body.

This is the footer

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.

Change the color-palette value of a card component to change its appearance using the color-palette attribute.

<pfe-card color-palette="accent">
  <h3 slot="header">Card header</h3>
  <p>This is the pfe-card body.</p>
  <div slot="footer">
    <p>This is the footer</p>
  </div>
</pfe-card>

Card header

This is the pfe-card body.

This is the footer

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 propogate.

Page-level CSS, theme variables

Theme variables will impact all components on the page where this CSS is loaded.

// your-page.css
:root {
  --pfe-theme--color--ui-accent: green;
  --pfe-theme--color--surface--darker: navy;
}

Note: overriding local variables (i.e., –pfe-card–foo) will not work at this level. Those overrides can only be done on the component via tag name, class, or ID.

Page-level CSS, component variables

/* your-page.css */
pfe-band {
  --pfe-band--Padding--vertical: 34px;
  --pfe-band--BackgroundColor: green;
  --theme: saturated;
}

Avoiding the flash of unstyled content (FOUC)

PatternFly Elements provides a stylesheet that causes the body[unresolved] attribute to avoid the flash of unstyled content (FOUC). Adding the unresolved attribute to the body tag will hide the entire page until all elements have upgraded or 0.1618 seconds have passed, whichever happens first. By including the pfe--noscript.css file (wrapped in a noscript tag), all content displays immediately on pages with JavaScript disabled.

To customize the wait time, update the value of the --pfe-reveal-delay variable (default 2 second delay) and the --pfe-reveal-duration variable (how long the reveal animation takes, default 0.1618 seconds).

To prevent the auto-reveal script from waiting for all Patternfly elements to update, add the no-auto-reveal attribute to the body element.

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>
  <!-- Add PFE core styles to the head -->
  <link rel="stylesheet" href="https://jspm.dev/@patternfly/pfe-styles@next/pfe.min.css">
  <style>
    :root {
      /* Optional: customize the delay until the body is revealed regardless */
      --pfe-reveal-delay: 1;
      /* Optional: customize the animation duration of the reveal */
      --pfe-reveal-duration: 0.2s;
    }
  </style>
  <!-- Add noscript styles to immediately reveal content when JavaScript is disabled -->
  <noscript>
    <link rel="stylesheet" href="https://jspm.dev/@patternfly/pfe-styles@next/pfe--noscript.min.css">
  </noscript>
  <script type="module" src="https://jspm.dev/@patternfly/pfe-band@next"></script>
</head>
<!-- Add the unresolved attribute to the body tag -->
<!-- The pfe-core library and pfe.min.css file automatically remove the unresolved attribute -->
<body unresolved>
  <pfe-band>
    <h1 slot="header">No FOUC</h1>
    <p>Content will remain hidden until component definitions are loaded.</p>
  </pfe-band>
</body>
</html>