Pattern Example

Here's an example of how to scaffold out a new pattern.

Each pattern can have high level notes, as well as implementation examples.

Default Implementation

Below you can see an example pattern.

It has custom styles defined by our pattern CSS, and custom interaction defined by our pattern JavaScript.

These patterns will be exported in our toolkit bundles, and can also be used in prototypes.

<button class="pattern-example EP_js-pattern-example">
  Click Me!!!
</button>

Another Implementation

You can can easily include multiple examples of a pattern by putting multiple markdown files in the examples folder.

This example is displayed in an iFrame, since iFrameExample was set to true in the template frontmatter.

<button class="pattern-example EP_js-pattern-example">
  Click Me!!!
</button>