layouts.md

Layouts

Each slide can include a custom layout around its content. This can be used as a substitute for slide templates found in other presentation apps and libraries.

// example Layout.js
import React from 'react'

export default ({ children }) =>
  <div
    style={{
      width: '100vw',
      height: '100vw',
      backgroundColor: 'tomato'
    }}>
    {children}
  </div>

import Layout from './Layout'

# No Layout

---
export default Layout

# Custom Layout

The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS.

Built-in Layouts

mdx-deck includes a few built-in layouts for common slide variations.

See the Components docs for more.