Skip to main contentGatsby themeĀ Carbon

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

Aspect ratios

4:3

16:9

2:1

9:16

1:2

3:4

1:1

Code

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