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 Pattern Playground, examples can be created by anyone with the proper permissions. Manually coded examples can also be imported.

Modifying Pattern Examples via the Pattern Playground

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

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 make changes to the core of the system.

In addition to using the Schema Editor, the display area on the right side of the Pattern Playground is also interactive, enabling users to resize via click-and-drag or by entering specific height and width pixel dimensions in the available text areas.

Adding a New Pattern Example

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

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

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.