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.
pf-card
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
<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>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>
);
}
<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>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" }
];
}<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.
