The <DoDontExample>
component will generally need to be placed inside <Row>
and <Column>
components to align them to the grid at the correct size.
Caption title
Caption
This is some text
Caption title
Caption
Caption title
Caption
<DoDontExample type="do" captionTitle="Caption title" caption="Caption">

</DoDontExample>
<DoDontExample type="dont" aspectRatio="1:1" color="dark" captionTitle="Caption title" caption="Caption" text="This is some text"></DoDontExample>
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
<Video vimeoId="310583077" />
</DoDontExample>
property | propType | required | 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 | ||
type | string | dont | set to do to show green check, otherwise shows pink X | |
color | string | light | set to dark for dark background card | |
aspectRatio | string | set to 1:1 to force square example (We welcome contributions to add additional aspect ratio options) |