Do/Don't
- New
- Not reviewed for accessibility
Use the Do and Dont components to provide good and bad examples within documentation.
Do, Dont and DoDontContainer are a shortcodes, meaning they are globally available in all .md and .mdx files. So you can use the Do, Dont, and DoDontContainer components in any .md or .mdx file without importing them.
To create a side-by-side Do/Don't example, wrap the Do and Dont components with the DoDontContainer component:
<DoDontContainer> <Do> <img src="https://user-images.githubusercontent.com/586552/63106528-06de5100-bf51-11e9-8a5e-98583ed74874.png" /> <Caption>Use brief and direct communication</Caption> </Do> <Dont> <img src="https://user-images.githubusercontent.com/586552/63106527-06de5100-bf51-11e9-858c-72de6a5c728a.png" /> <Caption>Don't use wordy and redundant copy</Caption> </Dont> </DoDontContainer>
Note: Caption text should describe the image and be able to stand on its own. The alt prop should be used if a more detailed description of the image is needed.
The DoDontContainer component also accepts a stacked prop to create stacked Do/Don't examples:
<DoDontContainer stacked> <Do> <img src="https://user-images.githubusercontent.com/586552/63046880-46e5fb00-bea1-11e9-836d-be1b1c7d963f.png" /> <Caption>Use a container class to give the text a max-width</Caption> </Do> <Dont> <img src="https://user-images.githubusercontent.com/586552/63046881-46e5fb00-bea1-11e9-87ee-80dbeb0bea1c.png" /> <Caption>Don't let the text span the entire width of the window</Caption> </Dont> </DoDontContainer>
Do and Dont components can also be indented to increase the clarity of the example message within the documentation:
<DoDontContainer stacked> <Do indented> Place pane regions on the left to display navigation, filtering, or an overview for entities such as users, bots, apps, etc. </Do> <Dont indented> Don't display more than three columns of information on a page. </Dont> </DoDontContainer>