DoDontRow
The
<DoDontRow>
<DoDont>
Example
This is some text
This is some text
This is some text
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>
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><DoDonttext="This is some text"captionTitle="Caption title"caption="Caption"
Video
<DoDontRow><DoDont captionTitle="Caption title" caption="Caption" colLg="8"><Video title="Video example" vimeoId="310583077" /></DoDont></DoDontRow>
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" />
Props
DoDontRow
property | propType | required | default | description |
---|---|---|---|---|
children | node | yes | child node, expects a
|
Do & Dont
property | propType | required | default | description |
---|---|---|---|---|
children | node | child node, expects a markdown image or
| ||
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
| |
aspectRatio | string |
| ||
type | string |
| specify the type of example with
| |
…columnProps | number |
| specify any
|