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

4:3

16:9

2:1

9:16

1:2

3:4

1:1

Code

Image

<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

<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"
aspectRatio="1:1"
colLg="8"
/>
</DoDontRow>

Video

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

Aspect Ratios

<DoDontRow>
<DoDont aspectRatio="4:3" text="4:3" />
<DoDont aspectRatio="16:9" text="16:9" />
<DoDont aspectRatio="2:1" text="2:1" />
</DoDontRow>
<DoDontRow>
<DoDont aspectRatio="9:16" text="9:16" />
<DoDont aspectRatio="1:2" text="1:2" />
<DoDont aspectRatio="3:4" text="3:4" />
</DoDontRow>
<DoDontRow>
<DoDont aspectRatio="1:1" text="1:1" />
</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
aspectRatiostring
1:1
,
1:2
,
2:1
,
3:4
,
4:3
,
16:9
,
9:16
typestring
do
specify the type of example with
do
or
dont
…columnPropsnumber
colMd=4, colLg=4
specify any
<Column>
props to pass down