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 | required | default | description | | ------------ | -------- | -------- | ------- | ----------------------------------------------------------------- | | children | node | | | child node, expects a markdown image or

<Video>

do

dark

1:1

1:2

2:1

3:4

4:3

16:9

9:16

Edit this page on GitHub

Components: Code blocks

Components: DoDontRow