Pattern Annotations

Fepper uses Front Matter (YAML + Markdown) for pattern annotations:

el: #title
state: inprogress
title: Title in YAML
This is a *Markdown* description of my pattern.

el must be a CSS selector identifying the element to annotate. When the Annotations Viewer is opened, a tooltip will appear above the element, and the annotation's title and description will be rendered in the viewer. The state will be rendered as a colored dot denoting the pattern's progress in the UI menu and elsewhere.

An annotation file normally has a .md file extension, although this can be configured in patternlab-config.json under frontMatterExtension. A pattern-specific annotation filename must match the name of the pattern being annotated. For example, to annotate the following pattern:


Name your annotation file:


Annotating Pseudo-Patterns

To annotate pseudo-patterns, replace the tilde sign (~) with a hyphen (-) when naming your annotation file.

For example, to annotate the following pseudo-pattern:


Name your annotatation file:


Global Annotation File


el: .hamburger
title: Hamburger
Ich bin ein Hamburger.
el: .hero
title: Hero
Up front, on top, centered.
el: .sub
title: Sub
Below hero.
el: .dagwood
title: Dagwood
Sandwich of sandwiches.

Located at source/_annotations, the global annotation file(s) must be named with the .md extenstion, or whatever is configured as the frontMatterExtension. Annotation files (global and pattern-specific) can consist of any number of annotations, each separated by ~*~.