Look at this page that was generated from an MDX file.

MDX is an extension of markdown (.md) that lets you write JSX code and use React Components as shortcodes in markdown, just remember to update your file extension from .md to .mdx.

This page is built with MDX
Last updated 01/15/2021

This is an h3 in markdown syntax

This is bold markdown text:

You can still write your pages in plain markdown, mixed in with regular HTML with Taiwind CSS or custom CSS classes. It's up to you what you want to do. You can also imort other components at the top of the file if for some reason you don't want to add it to the components shortcode config insde the MDX component. Like I did with this outbound link you can click for more details.

But using imports means you'll have to style them yourself and you want to avoid that. So you should just use the link component to create both inbound and outbound links. Using Markdown Syntax to create links works just as well for both internal and external links since it's already pre-configured to use the link component.


This is an h5 title text pattern with a margin modifier

You can also write your own code in markdown, although that's not recommended you can technically do it. Go search for that though, I remember seeing an example a while back but I can't find it right now.

This is a content section component with no container and custom vertical padding

You can use component shortcodes

You can write regular HTML content.

Whatever components you pass to or define in MDX will be available as shortcodes.

You can use regular markdown syntax, but not in a grid - have to wrap that in a div or something man. I mean give me something to work with here dude.

This is a regular h6 headline

This is just a regular markdown paragraph. That's cool and all but shortcodes are even cooler, check some of them out:

Look at all the different style buttons


Outline buttons

Text buttons

Button sizes

Look at this CSS grid component

Box Column
Grid Column
Two Column Span Grid Column
Full Span Grid Column
Grids are especially useful for making forms:

Sometimes you need another hero!

This is why this component is here, to save you from the pain of not having a hero when you need one.

Contact us

Click the button below and tell us about your project. Or give us a call at 650-761-1372 during regular business hours.

Contact Us