PatternFly Elements
Lightweight
Install 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.
npm install @patternfly/pfe-card @patternfly/pfe-cta<script type="module">
import "/elements/pfe-card/dist/pfe-card.min.js"
import "/elements/pfe-cta/dist/pfe-cta.min.js"
</script><pfe-card color="lightest">
<h2 slot="pfe-card--header">Card component</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit quam alias ducimus, amet iure quae earum, saepe labore repellendus culpa ut eligendi ipsa repudiandae? Provident similique libero harum officiis atque!</p>
<div slot="pfe-card--footer">
<pfe-cta>
<a href="components/card">Learn more about pfe-card</a>
</pfe-cta>
</div>
</pfe-card>Card component
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit quam alias ducimus, amet iure quae earum, saepe labore repellendus culpa ut eligendi ipsa repudiandae? Provident similique libero harum officiis atque!
Universal
Integrate PatternFly Elements with your framework of choice or use them by themselves.
PatternFly Elements integrate seamlessly with multiple frontend frameworks. Or use PatternFly Elements on their own without a framework. It's up to you and the needs of your project.
import React from "react";
import "@patternfly/pfe-accordion";
export default function App() {
const data = [
{ header: "Heading 1", panel: "Here is some content"},
{ header: "Heading 2", panel: "Here is some more content" }
];
return (
<pfe-accordion>
{data.map(accordion =>
<>
<pfe-accordion-header>
<h3>{accordion.header}</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>{accordion.panel}</p>
</pfe-accordion-panel>
</>
)}
</pfe-accordion>
);
}Accordion header
Here is some content
Accordion header
Here is some more content
Themeable
Make PatternFly Elements components your own by defining a custom theme palette.
Use CSS custom properties to theme at a global or component level.
Card 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. A regular link, or a visited one. Non, qui dolore ex soluta exercitationem fuga asperiores natus illo nobis? Expedita modi fuga qui praesentium.
Card 2
Lorem ipsum dolor, sit amet consectetur adipisicing elit. A regular link, or a visited one. Non, qui dolore ex soluta exercitationem fuga asperiores natus illo nobis? Expedita modi fuga qui praesentium.
Card 3
Lorem, ipsum dolor sectetur adipisicing elit. A regular link, or a visited one. doloremque natus corrupti ullam numquam laudantium voluptatibus assumenda alias recusandae vel temporibus a soluta?
Tab 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam consequatur soluta totam labore. Dolores eum, omnis earum aliquam explicabo excepturi at voluptate, repellendus ipsam velit, nisi enim autem reiciendis reprehenderit!
Tab 2
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque asperiores aspernatur ducimus voluptatum exercitationem saepe eius voluptatem, dicta sunt ad voluptates, vitae quod autem, ipsa veritatis at sed odio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem possimus, velit assumenda id ea dicta at deleniti neque repellendus quasi doloremque quidem quam fuga aliquam temporibus adipisci ducimus saepe ullam.
Tab 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet doloremque dignissimos, libero magni repudiandae quod quam optio deserunt, beatae consequatur eius officiis molestiae molestias? Adipisci suscipit beatae sed vitae consectetur.
Accordion header 1
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita obcaecati natus porro, commodi quaerat saepe minus iusto consectetur fuga consequuntur repudiandae? Quidem odio accusantium similique magni vel a, tenetur sequi.
Accordion header 2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium ea totam, maxime laudantium minus modi ipsam. Dolorem suscipit possimus ullam eum pariatur? Repudiandae doloremque consectetur commodi iusto suscipit fugit nobis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quidem laborum, magni quas quibusdam ipsam consectetur, quod consequuntur consequatur ipsum blanditiis animi harum quasi quam, temporibus nostrum quis explicabo magnam?
Accordion header 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti maxime esse, dolores ut quam, cupiditate ipsam optio at et perferendis quod eveniet veniam temporibus eius rerum fugiat sequi sapiente saepe.
Context-aware
Set a light, dark, or saturated context and watch PatternFly Elements respond.
Since PatternFly Elements are contextually aware of their surface colors, when you change the context, PatternFly Elements will adjust child elements with appropriate contrasting values. For example, a dark context on an element would adjust child elements to have light colored text.
Accordion header 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos eius architecto sint sed provident. Fugiat quibusdam voluptas eveniet, facere repellendus aperiam aliquid voluptate est porro magni itaque laboriosam voluptatem modi?
Accordion header 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas tenetur possimus voluptates ipsam. Unde porro cupiditate eius sed, modi dolor fuga praesentium, rerum minima, quis iusto odio minus tempora?
Accordion header 3
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit eos eaque earum porro nisi. Exercitationem qui voluptate officiis debitis alias nostrum! Iusto fugit aliquam temporibus nulla? Eos veniam dolorem delectus?
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sunt sapiente quae totam neque beatae soluta expedita sed molestiae error praesentium, quas cupiditate eaque excepturi. Laboriosam soluta totam neque magni!
Tab 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt pariatur culpa mollitia, optio vitae non harum? Voluptate possimus laborum error ex, porro, ut cupiditate iusto officia facilis adipisci iure veniam.
Tab 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ut quibusdam accusamus alias exercitationem sequi impedit, cumque adipisci eos, expedita porro? Ullam quam aspernatur perspiciatis. Similique neque doloremque voluptatum cupiditate?