DoDontExample

The <DoDontExample> component will generally need to be placed inside <Row> and <Column> components to align them to the grid at the correct size.

Example

Image

Alt text

Caption title

Caption

Text

This is some text

Caption title

Caption

Video

Caption title

Caption

Code

Image

<DoDontExample type="do" captionTitle="Caption title" caption="Caption"> ![Alt text](images/light-theme.png) </DoDontExample>

Text

<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text"></DoDontExample>

Video

<DoDontExample type="do" caption="Caption" captionTitle="Caption title"> <Video vimeoId="310583077" /> </DoDontExample>

Props

propertypropTyperequireddefaultdescription
childrennodechild node, expects a markdown image or <Video> component
textstringtext to display inside the component instead of an image or video
captionstringcaption
captionTitlestringcaption title
typestringdontset to do to show green check, otherwise shows pink X
colorstringlightset to dark for dark background card
aspectRatiostringset to 1:1 to force square example
(We welcome contributions to add additional aspect ratio options)