Using Side-by-Side Layouts

Split content into two columns that appear side-by-side on desktop and stack on mobile:

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';

<SideBySide>
  <Left>
    ## Left Column
    Content on the left side.
  </Left>
  <Right>
    ## Right Column
    Content on the right side.
  </Right>
</SideBySide>

Nesting Other Components

You can put any component inside Left or Right — images, callouts, buttons, accordions, etc:

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';
import photo from '@assets/events/my-photo.jpg';

<SideBySide showDivider={false}>
  <Left>
    <Img src={photo} alt="Workshop" enableClickToEnlarge={false} />
  </Left>
  <Right centerVertical>
    <Callout title="Tip">
      Pair an image on one side with text or a callout on the other.
    </Callout>
  </Right>
</SideBySide>

Options

Hide the divider

A vertical line appears between columns on desktop by default. Turn it off with showDivider={false}:

<SideBySide showDivider={false}>
  <Left>...</Left>
  <Right>...</Right>
</SideBySide>

Center content vertically

Use centerVertical on Left or Right to vertically center shorter content:

<SideBySide>
  <Left centerVertical>Short text, centered.</Left>
  <Right>Longer content on the other side...</Right>
</SideBySide>

Optional Fields

SideBySide:

Left / Right: