{"componentChunkName":"component---src-pages-how-to-contribute-pattern-mdx","path":"/how-to-contribute/pattern/","result":{"pageContext":{"frontmatter":{"title":"Patterns","description":"Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows."},"relativePagePath":"/how-to-contribute/pattern.mdx","titleType":"prepend","MdxNode":{"id":"f35c7d6d-2ff2-55c5-96f9-e9f0ec8f13b7","children":[],"parent":"8fc2e137-82aa-5f95-b04a-cc91c8c3cd8c","internal":{"content":"---\ntitle: Patterns\ndescription: Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.\n---\n\n<PageDescription>\n\nPatterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.\n\n</PageDescription>\n\n## First steps to contributing\n\nIf you’ve designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.\n\nStart by opening a [Github issue](https://github.com/carbon-design-system/carbon-website/issues/new). Include a detailed description in which you:\n\n- Define your pattern and explain the rationale\n- Include mockups and/or prototypes of any fidelity\n- Clarify whether it uses existing components, new components, or both\n- Include competitive and comparative analysis, and any inspirations from other products\n\nThis issue will be the staging ground for the pattern contribution, and you should expect the Carbon core team and the community to weigh in with suggestions.\n\nWe encourage you to surface work in progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to help.\n\n## How to write a pattern\n\nThese guidelines are to help you prepare a complete and comprehensive pattern for submission to the IBM Design System. Depending on the pattern, you may need to make some adjustments to the structure but your pattern should cover all of the aspects outlined below.\n\nWe've also created a [Markdown file](https://github.com/carbon-design-system/carbon-website/blob/master/docs/pattern-template.mdx) that includes this guidance. Alternatively, you can provide your content to us in a Box note.\n\n## Overview\n\nThis section answers the question: “What problem does this pattern solve?”\n\n- Define the use of your pattern and what it does.\n- Explain a user’s needs and how the pattern meets those needs.\n\n### Anatomy\n\nInclude an image with callouts explaining each part of the pattern.\n\n`Show pattern in visual form`\n\n### When to use\n\nInclude a short list describing situations where this pattern could be applied.\n\nFor example, use this pattern when:\n\n- Situation 1\n- Situation 2\n\n### When not to use (optional)\n\nIf required, include a short explanation about when not to use this pattern.\n\n## The solution\n\nThis section explains the pattern in detail. Use a combination of written explanations and visuals to tell the story.\n\n### Behaviors, structure, and functionality\n\n- Describe the elements, components, and content that make up the pattern.\n- Describe pattern behaviors, including guidance on interactions, and changes in states and content.\n- Show the pattern in context. Use visuals throughout your written commentary to illustrate your guidance.\n\nDifferent patterns require different visuals to best explain the behaviors and hierarchy. Choose the options that make the most sense for the story you are telling. See our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines) for information about creating assets for the IBM Design System.\n\n- Use annotated wireframes or sketches to explain the visual hierarchy of components.\n- Create high-level user flows to explain the big picture.\n- Create a functional prototype if that is the best way to illustrate the pattern's behavior.\n\nProvide a [Sketch file](https://www.sketch.com/docs/getting-started/) with any symbols you've created in the development of this pattern.\n\n### Best practices\n\nList out best practices and include any design considerations that help with\nmaking choices.\n\n- Do's\n- Dont's\n\n### Other use cases\n\nIf there are use cases that require a different solution, include those here with corresponding explanations and visuals. Be sure to explain the reasons for using one solution over another.\n\n## Accessibility\n\nEvaluate your pattern to ensure it meets [accessibility standards](/guidelines/accessibility/overview) and guidelines, and provide details of compliance.\n\nFor example, “Users should be able to TAB into the input field of the search box to begin typing and press ENTER to run the search query.”\n\n## Related\n\nWhich components did you use when building this pattern? Did you reference other patterns? List them here.\n\nIf necessary, clarify any differences between this pattern and related patterns.\n\n## References\n\nHelp designers understand your process by explaining your rationale for the way you implemented the pattern. Include any research, citations, books or articles that you found helpful.\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","type":"Mdx","contentDigest":"6374247b30184f1577a9ac8b48810188","counter":1468,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Patterns","description":"Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows."},"exports":{},"rawBody":"---\ntitle: Patterns\ndescription: Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.\n---\n\n<PageDescription>\n\nPatterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.\n\n</PageDescription>\n\n## First steps to contributing\n\nIf you’ve designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.\n\nStart by opening a [Github issue](https://github.com/carbon-design-system/carbon-website/issues/new). Include a detailed description in which you:\n\n- Define your pattern and explain the rationale\n- Include mockups and/or prototypes of any fidelity\n- Clarify whether it uses existing components, new components, or both\n- Include competitive and comparative analysis, and any inspirations from other products\n\nThis issue will be the staging ground for the pattern contribution, and you should expect the Carbon core team and the community to weigh in with suggestions.\n\nWe encourage you to surface work in progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to help.\n\n## How to write a pattern\n\nThese guidelines are to help you prepare a complete and comprehensive pattern for submission to the IBM Design System. Depending on the pattern, you may need to make some adjustments to the structure but your pattern should cover all of the aspects outlined below.\n\nWe've also created a [Markdown file](https://github.com/carbon-design-system/carbon-website/blob/master/docs/pattern-template.mdx) that includes this guidance. Alternatively, you can provide your content to us in a Box note.\n\n## Overview\n\nThis section answers the question: “What problem does this pattern solve?”\n\n- Define the use of your pattern and what it does.\n- Explain a user’s needs and how the pattern meets those needs.\n\n### Anatomy\n\nInclude an image with callouts explaining each part of the pattern.\n\n`Show pattern in visual form`\n\n### When to use\n\nInclude a short list describing situations where this pattern could be applied.\n\nFor example, use this pattern when:\n\n- Situation 1\n- Situation 2\n\n### When not to use (optional)\n\nIf required, include a short explanation about when not to use this pattern.\n\n## The solution\n\nThis section explains the pattern in detail. Use a combination of written explanations and visuals to tell the story.\n\n### Behaviors, structure, and functionality\n\n- Describe the elements, components, and content that make up the pattern.\n- Describe pattern behaviors, including guidance on interactions, and changes in states and content.\n- Show the pattern in context. Use visuals throughout your written commentary to illustrate your guidance.\n\nDifferent patterns require different visuals to best explain the behaviors and hierarchy. Choose the options that make the most sense for the story you are telling. See our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines) for information about creating assets for the IBM Design System.\n\n- Use annotated wireframes or sketches to explain the visual hierarchy of components.\n- Create high-level user flows to explain the big picture.\n- Create a functional prototype if that is the best way to illustrate the pattern's behavior.\n\nProvide a [Sketch file](https://www.sketch.com/docs/getting-started/) with any symbols you've created in the development of this pattern.\n\n### Best practices\n\nList out best practices and include any design considerations that help with\nmaking choices.\n\n- Do's\n- Dont's\n\n### Other use cases\n\nIf there are use cases that require a different solution, include those here with corresponding explanations and visuals. Be sure to explain the reasons for using one solution over another.\n\n## Accessibility\n\nEvaluate your pattern to ensure it meets [accessibility standards](/guidelines/accessibility/overview) and guidelines, and provide details of compliance.\n\nFor example, “Users should be able to TAB into the input field of the search box to begin typing and press ENTER to run the search query.”\n\n## Related\n\nWhich components did you use when building this pattern? Did you reference other patterns? List them here.\n\nIf necessary, clarify any differences between this pattern and related patterns.\n\n## References\n\nHelp designers understand your process by explaining your rationale for the way you implemented the pattern. Include any research, citations, books or articles that you found helpful.\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","fileAbsolutePath":"/zeit/3f757860/src/pages/how-to-contribute/pattern.mdx"}}}}