Skip to main content

Do and Don't

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

  1. Import relevant components from @primer/doctocat-nextjs:
import {DoDontContainer, Do, Dont} from '@primer/doctocat-nextjs'
  1. 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="/images/placeholder-1200x630.png" alt="" />
    <Caption>Example of what you should do</Caption>
  </Do>
  <Dont>
    <img src="/images/placeholder-1200x630.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="/images/placeholder-1200x630.png" alt="" />
    <Caption>Example of what you should do</Caption>
  </Do>
  <Dont>
    <img src="/images/placeholder-1200x630.png" alt="" />
    <Caption>Example of what you shouldn&apos;t do</Caption>
  </Dont>
</DoDontContainer>
Do
Example of what you should do
Don’t
Example of what you shouldn’t do
Doctocat