The

<DoDontRow>

component is a custom row used alongside the

<DoDont>

component, which now includes built in columns.

Example

This is some text

Caption title

Caption

Caption title

Caption

4:3

16:9

2:1

9:16

1:2

3:4

1:1

Code

Image

<DoDontRow>
  <DoDont aspectRatio="1:1">![Alt text](./images/light-theme.jpg)</DoDont>
  <DoDont type="dont" aspectRatio="1:1">
    ![Alt text](./images/light-theme.jpg)
  </DoDont>
</DoDontRow>
Copy to clipboard

Text

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

Video

<DoDontRow>
  <DoDont captionTitle="Caption title" caption="Caption" colLg="8">
    <Video title="Video example" vimeoId="310583077" />
  </DoDont>
</DoDontRow>
Copy to clipboard

Aspect Ratios

<DoDontRow>
  <DoDont aspectRatio="4:3" text="4:3" />
  <DoDont aspectRatio="16:9" text="16:9" />
  <DoDont aspectRatio="2:1" text="2:1" />
</DoDontRow>
<DoDontRow>
  <DoDont aspectRatio="9:16" text="9:16" />
  <DoDont aspectRatio="1:2" text="1:2" />
  <DoDont aspectRatio="3:4" text="3:4" />
Copy to clipboard

Props

DoDontRow

| property | propType | required | default | description | | -------- | -------- | -------- | ------- | ---------------------------------------- | | children | node | yes | | child node, expects a

DoDont

component |

Do & Dont

| property | propType | required | default | description | | -------------- | -------- | -------- | ------------------ | ----------------------------------------------------------------- | | children | node | | | child node, expects a markdown image or