---
title: MDX Design System
description: List of components supported by MDX Design System
date: April 13, 2022
---

This is a random blog post to test the different components on my MDX Design System.

<br />
<br />

**Lorem Ipsum** has the industry's standard `dummy` text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

---

#### [Heading with link](#heading-with-link)

---

#### Code block

Supports syntax highlighting and line numbers

```javascript
console.log("code");
var foo = "yo";
```

```shell
npm run build
```

```text
console.log("code");
var foo = "yo";
```

Also supporting inline code `console.log('inline')`

---

#### Links

External links : [MDX](https://mdxjs.com "title")

Internal links : [Code Block](#code-block)

---

#### Blockquote

> A very important information to highlight

---

#### Lists

- Asterisks for unordered items

1. Decimals and a dot for ordered items

---

#### Image

<Image
  width="1000px"
  height="600px"
  src="/photography/DJI_0029.jpg"
  alt="image test"
  borderRadius="md"
  objectFit="cover"
/>

---

#### Custom components

<Box
  border="2px"
  borderRadius="md"
  p={4}
  borderColor="gray.200"
  fontSize="2xl"
  onClick={() => alert("hey")}
>
  Custom Component: click me
</Box>


List of components supported by MDX Design System

MDX Design System

.css-1svrwbw{font-weight:var(--chakra-fontWeights-bold);color:var(--chakra-colors-purple-400);}Heading 1

Heading 2

Heading 3

Heading 4

Heading with link

Code block

Links

Blockquote

Lists

Image

Custom components

Heading 1