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