Gatsby Theme Carbon

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

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

Text

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

Video

<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: Accordion

Components: Caption