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