---
meta-title: How to
title: How to use and submit patterns
cta: Patterns are coded UI components designed to be dropped into projects. The intent of patterns are to solve common patterns, scaffold faster, and integrate with your existing styles right out of the box.
filter-nav: false
filter-dropdowns: false
layout: static
---
There's a template pattern you copy-paste to get started. See the files on GitHub or download it as a ZIP
#E6E8EB
1. Import the screenshot you took, and do your best to center it
1. Scale the screenshot as needed
1. Be sure to save as a PNG
- `image-gallery/image-gallery.yml`
- You’ll want to describe your pattern and submit your name. A Yaml file uses a .yml
file extension and is where the pattern name, description, tags and more are stored.
- Make sure to add meaningful tags. Tags are important for many reasons, they not only tell people about the patterns but also help find others like it. Some examples: image, gallery, photos, captions, interactive.
- `image-gallery/layout.html` (advanced, optional)
- The pattern should a stand-alone component that comes with no extra grid markup or containers. You can use an optional layout file to display the Blocks in a nicer way.
- See guidance below
{{/markdown}}
layout.html
file.
Create a layout.html
file inside your patterns folder. So for our example, it will go in the article-card
folder.
Example: