Skip to content
PatternFly.org Contribute on Github

PatternFly Elements

A set of community-created web components based on PatternFly design.

Get started View the components

Lightweight

Use only what you need.

Pick and choose from the list of components. Use them all or just one, and keep your page payloads small with PatternFly Elements because the components range from ~3 kB to ~10 kB in size minified and gzipped.

<script type="module" src="https://esm.sh/@patternfly/elements/pf-card/pf-card.js"></script>

<pf-card border>
  <h2 slot="header">Card component</h2>
  <p>PatternFly Elements are custom HTML elements that work everywhere.
    The Card element has <code>header</code> and <code>footer</code> slots for things like 
    titles and actions.
  </p>
  <a class="cta" slot="footer" href="components/card">More about <code>pf-card</code></a>
</pf-card>

Card component

PatternFly Elements are custom HTML elements that work everywhere. The Card element has header and footer slots for things like titles and actions.

More about pf-card
View the rest of the components Install Build Your UI Ship!

Universal

Integrate PatternFly Elements with your framework of choice or use them by themselves.

PatternFly Elements integrate seamlessly with multiple frontend frameworks. Just install it with npm install @patternfly/elements, or use PatternFly Elements on their own without a framework. It's up to you and the needs of your project.

HTML

<script type="module">
  import '@patternfly/elements/pf-accordion/pf-accordion.js';
</script>

<pf-accordion>
  <pf-accordion-header expanded>
    <h3>Getting Started</h3>
  </pf-accordion-header>
  <pf-accordion-panel>
    <p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
  </pf-accordion-panel>
  <pf-accordion-header>
    <h3>HTML APIs</h3>
  </pf-accordion-header>
  <pf-accordion-panel>
    <p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
  </pf-accordion-panel>
</pf-accordion>
React
import {
  Accordion,
  AccordionPanel,
  AccordionHeader,
} from "@patternfly/elements/react/pf-accordion/pf-accordion.js";

export default function App() {
  const data = [
    { header: "Getting Started", panel: <>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.<>},
    { header: "HTML APIs", panel: <>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.<>}
  ];
  return (
    <Accordion>{data.map(({ header, panel }) => (
      <AccordionHeader>
        <h3>{header}</h3>
      </AccordionHeader>
      <AccordionPanel>
        <p>{panel}</p>
      </AccordionPanel>))}
    </Accordion>
  );
}
Vue
<template>
  <pf-accordion>
    <template v-for="{ header, panel } in data">
      <pf-accordion-header>
        <h3>{{ header }}</h3>
      </pf-accordion-header>
      <pf-accordion-panel>
        <p>{{ panel }}</p>
      </pf-accordion-panel>
    </template>
  </pf-accordion>
</template>


<script>
import "@patternfly/elements/pf-accordion/pf-accordion.js";
export default {
  name: 'App',
  data() {
    return {
      data: [
        { header: 'Heading 1', panel: 'Here is some content' },
        { header: 'Heading 2', panel: 'Here is some more content' },
      ],
    };
  },
};
</script>
Angular
import "@patternfly/elements/pf-accordion/pf-accordion.js";

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <pf-accordion>
      <ng-template ngFor let-item [ngForOf]="data">
        <pf-accordion-header>
          <h3>{{ item.header }}</h3>
        </pf-accordion-header>
        <pf-accordion-panel>
          <p>{{ item.panel }}</p>
        </pf-accordion-panel>
      </ng-template>
    </pf-accordion>
  `,
})
export class AppComponent {
  data = [
    { header: "Heading 1", panel: "Here is some content"},
    { header: "Heading 2", panel: "Here is some more content" }
  ];
}
Svelte
<pf-accordion>
  {#each data as item}
  <pf-accordion-header>
    <h3>{item.header}</h3>
  </pf-accordion-header>
  <pf-accordion-panel>
    <p>{item.panel}</p>
  </pf-accordion-panel>
  {/each}
</pf-accordion>

<script>
  import "@patternfly/elements/pf-accordion/pf-accordion.js";
	let data = [
    { header: 'Heading 1', panel: 'Here is some content' },
    { header: 'Heading 2', panel: 'Here is some more content' },
  ];
</script>

Getting Started

Read our Getting started page to learn how to install and use PatternFly Elements.

HTML APIs

For more information on how to use each PatternFly element, read the component docs.

Learn how to integrate PatternFly Elements in your application
© 2018-2024 Red Hat, Inc. Deploys by Netlify