Difficulty: beginner
Estimated Time: 20 minutes

Module 3: Modifier and Utility Classes

This module will deep dive into how to utilize and create modifier classes per component and how to efficiently use utility classes across the UI.

Congratulations - you finished the Modifiers and Utility classes course!

Please fill out a quick survey here

As a reminder, you will find the documentation for all modifier classes at the end of each component page. PatternFly also has a link to the total list of modifiers that we have: https://pf4.patternfly.org/modifiers

Modifiers and utility classes

Step 1 of 4

Modify simple component

Components have multiple variations due in part to the use of modifier classes, which override or add new styling to the same component. Modifiers use the “pf-m-” prefix, followed by a suitable name for the modifier. PatternFly aims to use consistent names for modifiers across components, however the styles for each modifier are specific to that component element.

Task: Change the Badge component's state from unread to read

In this step we are going to add two Badge components that use the unread modifier and we are going to change the badge to the read variation by replacing the modifier.

Note: the Badge component requires a modifier

1) Copy code to the editor.

Click the Copy to Editor button below to add html for a Badge to the index.html file.

<span class="pf-c-badge pf-m-unread">
  200
</span>
<span class="pf-c-badge pf-m-unread">
  300
</span>

2) You should see two Badges appear with the background-color of blue. The modifier class: pf-m-unread modifies its styles to be “unread”.

3) The Badge also has a “read” state denoted by the modifier class pf-m-read. Update the second Badge so that it has the modifier for “read”.

Hint: The background color of the second Badge should have changed to grey because of the css styles attached to the modifier class pf-m-read.

index.html
myapp.scss