Do and Don't

Learn how to use add a Do or Don't to your documentation

Import relevant components from @primer/doctocat-nextjs:

import {DoDontContainer, Do, Dont} from '@primer/doctocat-nextjs'

Use the components in your Markdown file, but ensure that you wrap the component in a div with the custom-component class. This will ensure that article formatting isn't applied to the custom component.

<DoDontContainer>
  <Do>
    <img src="https://via.placeholder.com/1000x350/d3d9df/d3d9df.png" alt="" />
    <Caption>Example of what you should do</Caption>
  </Do>
  <Dont>
    <img src="https://via.placeholder.com/1000x350/d3d9df/d3d9df.png" alt="" />
    <Caption>Example of what you shouldn't do</Caption>
  </Dont>
</DoDontContainer>

Will render:

Do

Example of what you should do

Don’t

Example of what you shouldn't do

Stacked

Use the stacked option to vertically stack the Do and Don't images.

<DoDontContainer stacked>
  <Do>
    <img src="https://via.placeholder.com/1000x350/d3d9df/d3d9df.png" alt="" />
    <Caption>Example of what you should do</Caption>
  </Do>
  <Dont>
    <img src="https://via.placeholder.com/1000x350/d3d9df/d3d9df.png" alt="" />
    <Caption>Example of what you shouldn't do</Caption>
  </Dont>
</DoDontContainer>

Do

Example of what you should do

Don’t

Example of what you shouldn't do