DoDontRow

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

Code

Image

components/DoDontRow/DoDontRow.js
<DoDontRow>
  <DoDont aspectRatio="1:1">![Alt text](./images/light-theme.png)</DoDont>
  <DoDont type="dont" aspectRatio="1:1">
    ![Alt text](./images/light-theme.png)
  </DoDont>
</DoDontRow>

Text

components/DoDontRow/DoDontRow.js
<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>

Video

components/DoDontRow/DoDontRow.js
<DoDontRow>
  <DoDont captionTitle="Caption title" caption="Caption" colLg="8">
    <Video title="Video example" vimeoId="310583077" />
  </DoDont>
</DoDontRow>

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		set to `1:1` to force square example (We welcome contributions to add additional aspect ratio options)
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: FeatureCard