Pattern States

Pattern states provide your team and client a simple visual of the current state of patterns in Fepper. Pattern states can track progress of a pattern from development, through client review, to completion. They can also be customized to refer to additional states. They are denoted by colored dots in the UI menu, Code Viewer, and View Alls.

Default Pattern States

Giving Patterns a State

Giving patterns a state is accomplished by setting the state key in a pattern's .md file (or whatever is configured in patternlab-config.json under frontMatterExtension). Consider this pattern:


Create or edit a file in the same location named

state: inreview
This is a block of media.

Adding Customized States

The three default states might not be enough for everyone. To add customized states, modify source/_styles/pattern-scaffolding.css, a Fepper-specific stylesheet that is editable by end-users. You can use the following as your CSS template for new pattern states:

.newpatternstate:before {
  color: #998866 !important;

Add state: newpatternstate to your pattern's .md file to have the new pattern state show in the UI menu and Code Viewer.