Skip to content

Do/Don't

Table of contents
Table of contents

The Do and Dont components are used for providing good and bad examples within documentation.

Usage

To use these components in your MDX files, import them like so:

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

Side-by-side

To create a side-by-side Do/Don't example, wrap the Do and Dont components with the DoDontContainer component:

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:

Edit this page on GitHub
3 contributorsdmarceycolebemisemplums
Last edited by dmarcey on September 6, 2019