PatternFly Elements - Home PatternFly Elements



The pfe-styles component ships with a variety of stylesheets to allow developers to opt-into what they need, and leave behind what they don't. We leverage naming conventions that match up with the core PatternFly project, and we follow best practices from the web and accessibility.




These typographical classes can be applied to any element, giving you lots of control over where and how you utilize them.

<div class="pfe-c-content">
<h3>Style a whole block of content</h3>
<p>with the content class</p>

<h2 class="pfe-title--6xl">Or style each headline</h2>
<h2 class="pfe-title--3xl">with specific classes</h2>
<h2 class="pfe-title--xs">as needed.</h2>
<p class="pfe-text--lg">There are body copy typography classes too.</p>
View the demo page of all CSS typography classes


There are also a variety of mixins, extends, and variables available in pfe-sass. We recommend checking out the sass doc for extensive information about how to use these tools.