Do/Don't

New
Not reviewed for accessibility

Source

On this page

Use the Do and Dont components to provide good and bad examples within documentation.

Usage

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.

Side-by-side

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>

<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.

Stacked

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>

<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>

Indented

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>

<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>

Edit this page on GitHub

4 contributors

Last edited by josepmartins on September 19, 2022