SplitScreen

The SplitScreen component wraps any two components and displays them on a full-width grid, side-by-side on large screens and stacked on small screens. The left and right half of the grid take background color props.

The reverse

This is best deployed in a full-page layout, without sidebar, not constrained by width, as seen here.

Logo

jsx

<SplitScreen
  backgroundColorLeft="primary"
  backgroundColorRight="secondary"
  componentLeft={<BoxOne />}
  componentRight={<BoxTwo />}
/>
<SplitScreen
  backgroundColorLeft="secondary"
  backgroundColorRight="primary"
  componentLeft={<BoxOne />}
  componentRight={<BoxTwo />}
/>