DoDontExample
The
<DoDontExample>
<Row>
<Column>
Example
Image
Text
This is some text
Video
4:3
16:9
2:1
9:16
1:2
3:4
1:1
Code
ImageText<DoDontExample type="do" captionTitle="Caption title" caption="Caption">![Alt text](images/light-theme.jpg)</DoDontExample>
Video<DoDontExampletype="dont"aspectRatio="1:1"color="dark"captionTitle="Caption title"caption="Caption"text="This is some text"/>
Aspect ratios<DoDontExample type="do" caption="Caption" captionTitle="Caption title"><Video vimeoId="310583077" /></DoDontExample>
<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" />
Props
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 | ||
type | string | dont | set to
| |
color | string | light | set to
| |
aspectRatio | string |
|