Adding new components to the website

New components will automatically be discovered and added to the website navigation using the information provided in the front matter that lives in the header of each Markdown (.md) file that describes the component. This front matter includes an ID or name for the component and the section where the component should appear.

---
id: Your component name
section: Where this lives in the above structure, e.g. "components"
---

Each component will also need a related illustration to be used in the component catalog view and summary text describing the component which will appear at the top of the component page in all views.

The image file link and summary text must be added to the following file: /packages/v4/patternfly-docs/components-data.json In this file you will find an entry for each component in the following format:

“<component-name>": {
“Illustration”:”./images/component-illustrations/<component-name>.png”,
“summary”:”<summary text>
}

Summaries should be short (1-2 sentences) and give readers a quick overview of how the component is to be used. You may also include reference links to related components, if applicable, or other essential information that consumers of the component should be aware of.

Illustrations provide a visual that will help consumers identify the component when they are unsure how a component is named. For that reason they should be simple and distinct. Guidelines for creating component illustrations are included below.

Creating component illustrations

You should use a graphics tool like Sketch or Figma for creating illustrations. If you are using Sketch, add your new illustration to the master component illustrations file on Sketch Cloud.

When designing illustrations, we want to ensure simplicity, while maintaining clarity. It's important that all illustrations are clear and cohesive. If you are using the Sketch file, you will find some predefined symbols to use in place of common elements like buttons and text. Here are some rules and guidelines to follow:

1. Begin with a 200px x 200px artboard

2. Create an outline for the component (if needed):

• Fill white
• Border-none
• Shadow: Color #151515, Opacity 10%, adjust x-y accordingly

3. When using colors, ensure they align with PatternFly colors. For more information or other color variants, visit PatternFly color guidelines. The following are a set of default colors to use:

• Red (failure): #C9190B
• Green (success): #3E8635
• Yellow (warning): #F0AB00
• Blue (primary): #0066CC
• Grey (standard): #D2D2D2

4. Do not include every detail. You should simplify icons and other graphics where possible. For example, when putting success icons, use a solid green circle to represent the icon, and do not include the checkmark.

5. Avoid using text as much as possible, instead, use “Flow” font to represent where text would be.

• XL headers: 16 px
• L headers: 12 px
• Body: 8px
• Small body: 6px
• If needed, use Lorem Ipsum to represent text

6. Export the illustration as a 2x PNG with a white background and open a pull request to add it to the ./images/component-illustrations folder on patternfly-org.