SideBySide

The SideBySide component lets you split the screen in half, or more sections. You can use it to display a screenshot on the left-hand side of a doc, and some text on the right.

You need to wrap the content for each side inside a Side component, but you can add as much content as you need inside each Side.

Ideally, there'll never be more than two columns of content in a doc.

Here's an example of the component:

This is some awesome content from the amazing documentation team.

Create a SideBySide component

Here's a template of a SideBySide component:

<SideBySide>
  <Side>
    <img alt="example" src={exampleImg} />
  </Side>

  <Side>This is some awesome content from the amazing documentation team.</Side>
</SideBySide>;