Skip to main contentGatsby theme Carbon

DoDontExample

Warning: This component will be deprecated in a future release. Please use the DoDontRow and DoDont component instead.

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

Aspect ratios

4:3

16:9

2:1

9:16

1:2

3:4

1:1

Code

Image
<DoDontExample type="do" captionTitle="Caption title" caption="Caption">
![Alt text](images/light-theme.jpg)
</DoDontExample>
Text
<DoDontExample
type="dont"
aspectRatio="1:1"
color="dark"
captionTitle="Caption title"
caption="Caption"
text="This is some text"
/>
Video
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
<Video vimeoId="310583077" />
</DoDontExample>
Aspect ratios
<DoDontExample aspectRatio="4:3" text="4:3" />
<DoDontExample aspectRatio="16:9" text="16:9" />
<DoDontExample aspectRatio="2:1" text="2:1" />
<DoDontExample aspectRatio="9:16" text="9:16" />
<DoDontExample aspectRatio="1:2" text="1:2" />
<DoDontExample aspectRatio="3:4" text="3:4" />
<DoDontExample aspectRatio="1:1" text="1:1" />

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
aspectRatiostring
1:1
,
1:2
,
2:1
,
3:4
,
4:3
,
16:9
,
9:16