PatternFly Elements - Home PatternFly Elements

Typography

General

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.

pfe-base.css

pfe-typography-classes.css

The styles relating to typography lean on core PatternFly variables, so the prefix is --pf instead of --pfe by design, so that one set of common variables can influence both PatternFly and PatternFly Elements components. The classes, however, continue to use the .pfe prefix to keep them distinctive from PF core to avoid conflicts.

CSS

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>
   <ul>
     <li>hello</li>
     <li>world</li>
  </ul>
</div>

<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

Sass

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.