Learning MDX Deck: Layouts

Welcome back 👋. In this installment of Learning MDX Deck, I will go over MDX Deck’s built-in layouts. It is also possible to create your own layouts. I won’t cover that here, but you can read about it in the MDX Deck documentation. So lets get right to it. Here is what MDX Deck provides for layouts out of the box.

• Default
• Invert
• Split
• SplitRight
• FullScreenCode
• Horizontal

Layouts for MDX Deck are React components. To use a one, you first need to import it.

import { LayoutName } from 'mdx-deck/layouts'

Because each slide can use a different layout, multiple layouts can also be imported all at once.

import { LayoutName1, LayoutName2, LayoutName2 } from 'mdx-deck/layouts'

Once the layout is imported, place your content inside its component tags as shown below, making sure to place newlines around content items. Failure to use newlines can cause the slide to render incorrectly. Optionally, you can put content above or below the layout component.

# SLIDE TITLE

<LayoutName>

Add your content here.

</LayoutName>

Now that we know how to use the MDX Deck layouts, lets take a look at all the built-in options.

Default

The absence of specifying a layout component will provide the default behavior of stacking all content vertically on the slide from top to bottom.

# LAYOUT: Default

1. All content stacks
1. Top to bottom
1. On the slide
1. This is an ordered list

Invert

The Invert layout stacks content vertically like the default layout but it reverses the theme’s foreground and background colors.

import { Invert } from 'mdx-deck/layouts'

<Invert>

# LAYOUT: Invert

The foreground and background colors are inverted from the theme.

</Invert>

Split

The Split layout divides the slide into two vertical columns; left and right. The first item will display on the left and all additional items will be stacked vertically on the right.

import { Split } from 'mdx-deck/layouts'

# LAYOUT: Split

<Split>

![](https://media.giphy.com/media/1CrejqXxVZs9q/giphy.gif)

* Otter Elevates
* For The 🏀 Dunk

</Split>

First item displayed to the ⬅️, all remaining to the ➡️

SplitRight

The SplitRight layout is the reverse of the Split layout. The first item will display on the right and all additional items will be stacked vertically on the left.

import { SplitRight } from 'mdx-deck/layouts'

# LAYOUT: SplitRight

<SplitRight>

![](https://media.giphy.com/media/vjKrEyy2NVblS/giphy.gif)

* So Much Otter
* Cuteness 😍

</SplitRight>

First item displayed to the ➡️, all remaining to the ⬅️

FullScreenCode

The FullScreenCode layout will display code blocks fenced by three back-ticks using the full screen.

import { SplitRight } from 'mdx-deck/layouts'

<FullScreenCode>


```js
   const arrayOfNumbers = [0, 1, 2, 3, 4, 5];

   const sum = arrayOfNumbers.reduce(function (accumulator, currentValue) {
     return accumulator + currentValue;
   });

   console.log("The sum is: " + sum);
```


</FullScreenCode>

Horizontal

The Horizontal layout is the reverse of the default layout. Inside of stacking content vertically (top to bottom), it stacks the content left to right horizontally.

# LAYOUT: Horizontal

<Horizontal>

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

![](https://media.giphy.com/media/26gssIytJvy1b1THO/giphy.gif)

</Horizontal>

Each item displayed into its own column

👋 Hi Mr. Otter 👋

🏁 Conclusion

As you can see, MDX Deck provides a solid set of layouts that will cover most presentation needs. All the code used for this article can be viewed using the following references.

CodeSandbox.io

GitHub repository

https://github.com/davefollett/learning-mdx-deck-layouts

Deployed to Netlify

https://learning-mdx-deck-layouts.davefollett.io

🔜 Up Next

Next in the Learning MDX Deck series we will explore MDX Deck’s built in theme options. I’ll add a link here when it’s published.