DoDontExample

The <DoDontExample> component will generally need to be placed inside <Row> and <Column> components to align them to the grid at the correct size.

Example

Image

Caption title

Caption

Text

This is some text

Caption title

Caption

Video

Caption title

Caption

Code

Image

components/DoDontExample/DoDontExample.js
<DoDontExample type="do" captionTitle="Caption title" caption="Caption">
  ![Alt text](images/light-theme.png)
</DoDontExample>

Text

components/DoDontExample/DoDontExample.js
<DoDontExample
  type="dont"
  aspectRatio="1:1"
  color="dark"
  captionTitle="Caption title"
  caption="Caption"
  text="This is some text"
/>

Video

components/DoDontExample/DoDontExample.js
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
  <Video vimeoId="310583077" />
</DoDontExample>

Props

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
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)

Edit this page on GitHub

Components: Code blocks

Components: DoDontRow