warning icon

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

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>
Copy to clipboard

Text

components/DoDontExample/DoDontExample.js
<DoDontExample
  type="dont"
  aspectRatio="1:1"
  color="dark"
  captionTitle="Caption title"
  caption="Caption"
  text="This is some text"
/>
Copy to clipboard

Video

components/DoDontExample/DoDontExample.js
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
  <Video vimeoId="310583077" />
</DoDontExample>
Copy to clipboard

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" />
Copy to clipboard

Props

property	propType	default	description
children	node		child node, expects a markdown image or `<Video>` component
text	string		text to display inside the component instead of an image or video
caption	string		caption
captionTitle	string		caption title
type	string	dont	set to `do` to show green check, otherwise shows pink X
color	string	light	set to `dark` for dark background card
aspectRatio	string		`1:1`,`1:2`,`2:1`,`3:4`,`4:3`,`16:9`,`9:16`

Edit this page on GitHub

Components: Code blocks

Components: DoDontRow