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"
    aspectRatio="1:1"
    colLg="8"
  />
</DoDontRow>
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" />
</DoDontRow>
<DoDontRow>
  <DoDont aspectRatio="1:1" text="1:1" />
</DoDontRow>
Copy to clipboard

Props

DoDontRow

property	propType	required	default	description
children	node	yes		child node, expects a DoDont component

Do & Dont

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
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
type	string	do	specify the type of example with do or dont
…columnProps	number	colMd=4, colLg=4	specify any <Column> props to pass down

Edit this page on GitHub

Components: DoDontExample

Components: ExpressiveList