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

Example of MDX Deck's Default Layout Rendered

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

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

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

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>

Example of MDX Deck's FullScreenCode Layout Rendered

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

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

Comments

[Joe Zack]

This makes so much more sense to me than dragging stuff around in Powerpoint!

I love the "inverted" notion too, great way to make things stand out.

[Dave Follett]

I agree, but sometimes I just can't quite make it look/align like I want and I'm wishing I could drag it! But that is a problem with my HTML/CSS skills, not an MDX Deck issue.