Learning MDX Deck: Layouts
Tags: react, mdx, slides, javascript
Published: 2019-06-06 12:48:09

---
title: Learning MDX Deck: Layouts
published: true
tags: react,mdx,slides,javascript
canonical_url: https://davefollett.io/2019/06/05/mdx-deck-layouts/
cover_image: https://davefollett.io/2019/06/05/mdx-deck-layouts/cover-learning-mdx-deck-layouts.jpg
series: Learning MDX Deck
---

Welcome back 👋. In this installment of _Learning MDX Deck_, I will go over [MDX Deck’s](https://github.com/jxnblk/mdx-deck) 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](https://github.com/jxnblk/mdx-deck/blob/master/docs/layouts.md). So lets get right to it. Here is what MDX Deck provides for [layouts](https://github.com/jxnblk/mdx-deck/blob/master/docs/components.md#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.

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

Because each slide can use a different layout, multiple layouts can also be imported all at once.
 
```js
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
```

![Example of MDX Deck's Default Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-default.png)
<figcaption>Example of MDX Deck's Default Layout Rendered</figcaption>

## 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>
```

![Example of MDX Deck's Invert Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-invert.png)
<figcaption>Example of MDX Deck's Invert Layout Rendered</figcaption>

## 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 ➡️
```

![Example of MDX Deck's Split Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-split.png)
<figcaption>Example of MDX Deck's Split Layout Rendered</figcaption>

## 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 ⬅️
```

![Example of MDX Deck's SplitRight Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-splitright.png)
<figcaption>Example of MDX Deck's SplitRight Layout Rendered</figcaption>

## FullScreenCode

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

<pre>
import { SplitRight } from 'mdx-deck/layouts'

&lt;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);
```
&lt;/FullScreenCode>
</pre>

![Example of MDX Deck's FullScreenCode Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-fullscreencode.png)
<figcaption>Example of MDX Deck's FullScreenCode Layout Rendered</figcaption>

## 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 👋
```

![Example of MDX Deck's Horizontal Layout Rendered](https://davefollett.io/2019/06/05/mdx-deck-layouts/layout-horizontal.png)
<figcaption>Example of MDX Deck's Horizontal Layout Rendered</figcaption>

## 🏁 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

{% codesandbox learning-mdx-deck-layouts-i87ih %}

### GitHub repository

[https://github.com/davefollett/learning-mdx-deck-layouts](https://github.com/davefollett/learning-mdx-deck-layouts)

### Deployed to Netlify

[https://learning-mdx-deck-layouts.davefollett.io](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.