MDX Reference

A reference for all of the MDX components supported by Greenlight

2021-04-18

MDX is a superset of Markdown. This is the technology that allows embedding Tableau dashboards unto Markdown blog posts. The Greenlight team has provided an additional set of reusable components to help you write engaging content for your blog.

In MDX, components are written with JSX - the language used by the React JavaScript library. This document describes the syntax for each component and provides examples so you can use them for your own content.

Title

<Title 
    title="Interdisciplinary"
    titleSize={1}
    titleColor="primary"
    subtitle={<div>is a <strong>long</strong> title</div>}
    subtitleSize={3}
    subtitleColor="grey-lighter"
/>

Result:

Interdisciplinary

is a long title

Docs

is a short title

Callouts

<Callout
    title="Callout"
    subtitle={
    <div>
        A simple container to make <strong>callouts</strong>, using styles
        as defined for the component.
    </div>
    }
/>

Result:

Callout

A simple container to make callouts, using styles as defined for the component.

<Callout
    title="Callout"
    color="info"
    titleSize={1}
    titleColor="warning"
    subtitle={
    <div>
        A simple container to make <strong>callouts</strong>, using styles
        as defined for the component.
    </div>
    }
    subtitleSize={4}
    subtitleColor="warning light"
/>

Callout

A simple container to make callouts, using styles as defined for the component.

Cards

<Card
    header="Sample Card Component"
    image="https://bulma.io/images/placeholders/1280x960.png"
    content={<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Phasellus nec iaculis mauris.
            <a href="/"> @bulmaio</a><a href="/"> #css </a><a href="/">
            #responsive</a></span>}
    footer={[
        <a href="/" className="card-footer-item">Save</a>, 
        <a href="/" className="card-footer-item">Edit</a>, 
        <a href="/" className="card-footer-item">Delete</a>,
    ]}
/>

Result:

Sample Card Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio #css #responsive