MDX Blocks

  • Home
  • GitHub
  • Get Started

A wild new way to build websites

Write content in MDX. Build layouts with blocks. Customize with themes.

It's Showtime!

MDX Blocks allows you to quickly style blocks of content written in markdown using a consistent theme powered by Styled System. All content on this page is written in MDX and styled using MDX Blocks components. In addition to using style defaults defined in the theme, each section can override its child elements' styles per block.

Simple

Write content in markdown. Import and use React components

Effortless

Responsive layouts, without writing a single media query

Themeable

Control the look and feel with built-in presets or custom styles

Swappable

Change the styling of an MDX block without touching the content

A random image from unsplash.com

Another random image

Unsplash is cool

Hopefully these random photos are okay

This Block is Centered

Wow, would you look at that!

A little bit novel, a little bit cool as hell

Get Started

What it looks like

import { Banner } from 'mdx-blocks'
export default props =>
  <Banner
    {...props}
    color='white'
    bg='black'
    styles={{
      h1: {
        fontSize: [4, 5, 6],
        color: 'primary'
      }
    }}
  />

![background](background.jpg)

# Hello

This is a banner component

Hello Columns

Automatically lay out content horizontally based on the number of elements

Middle Column

These should be evenly split

Right Column

Hopefully this takes up a third of the page (if not, please open an issue)

Hero photo by Josh Gordon - all other photos are randomly fetched from Unsplash.com

  • MDX Blocks
  • Docs
  • GitHub