Pattern Annotations

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

---
el: #title
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.

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:

00-elements/images/landscape-16x9.mustache

Name your annotation file:

00-elements/images/landscape-16x9.md

Global Annotation File

Example:

---
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 ~*~.