Creating Pattern Examples

Pattern Examples allow you to document the modularity and presentation of patterns, or for any use case you see fit. Each example is viewable in isolation which is useful for testing or if using Slots for prototyping.

Using the Schema Editor, examples can be created by anyone with the proper permissions. Manually coded examples can also be imported.

Creating an Example from the Schema Editor

From a Template Tab of any Pattern Page, you’ll see the Schema Editor for the pattern.

When modifying the fields in the Schema Editor, the example will automatically update. These changes are saved as you edit, so be mindful of what you modify, especially if you plan to propose changes into the core of the system.

Template Stage

Add a new Example with the add button to the right of the examples list.

Add Example Button

You can also start a new Example by cloning one that already exists. Hover an Example to see the clone button.

Hovered Example

Examples can be embedded on pages via the Pattern Example block.

Creating an Example from a Template File

You may want to manually code an example to demonstrate particular use cases that aren’t otherwise possible with the Schema Editor alone.

Click the “Add Template” button, then provide a Path and Named Export (just like you would have done when connecting a coded template to a pattern page.

There of course won’t be a Schema Editor available for a manually coded example, but the example will live update when you make changes to the source file, and they can be embedded into Pattern Example Blocks or other pattern Slots, just like any other Pattern Example.