Skip to main contentGatsby theme Carbon

DoDontRow

The <DoDontRow> component is a custom row used alongside the <DoDont> component, which now includes built in columns.

Example

Alt text
Alt text

This is some text

This is some text

This is some text

Caption title

Caption

Caption title

Caption

Code

Image

components/DoDontRow/DoDontRow.js
<DoDontRow>
<DoDont aspectRatio="1:1">![Alt text](./images/light-theme.jpg)</DoDont>
<DoDont type="dont" aspectRatio="1:1">
![Alt text](./images/light-theme.jpg)
</DoDont>
</DoDontRow>

Text

components/DoDontRow/DoDontRow.js
<DoDontRow>
<DoDont text="This is some text" aspectRatio="1:1" />
<DoDont type="dont" text="This is some text" color="dark" aspectRatio="1:1" />
</DoDontRow>
<DoDontRow>
<DoDont
text="This is some text"
captionTitle="Caption title"
caption="Caption"

Video

components/DoDontRow/DoDontRow.js
<DoDontRow>
<DoDont captionTitle="Caption title" caption="Caption" colLg="8">
<Video title="Video example" vimeoId="310583077" />
</DoDont>
</DoDontRow>

Props

DoDontRow

propertypropTyperequireddefaultdescription
childrennodeyeschild node, expects a DoDont component

Do & Dont

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
colorstringlightset to dark for dark background card
aspectRatiostringset to 1:1 to force square example
(We welcome contributions to add additional aspect ratio options)
typestringdospecify the type of example with do or dont
…columnPropsnumbercolMd=4, colLg=4specify any <Column> props to pass down