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

<DoDontExample type="do" captionTitle="Caption title" caption="Caption">

![Alt text](images/light-theme.jpg)

</DoDontExample>
Copy to clipboard

Text

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

Video

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

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" />
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