Example: example of custom MDX component

components/Card.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export default function Card(props: { title: string; children: any }) {
+  const { title, children } = props;
+
+  return (
+    <StyledCard>
+      <CardTitle>{title}</CardTitle>
+      {children}
+    </StyledCard>
+  );
+}
+
+const StyledCard = styled.div`
+  position: relative;
+  padding: 24px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  width: 280px;
+  min-height: 350px;
+  background-color: #fff;
+  overflow: hidden;
+  z-index: 1;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${({ theme }) => theme.colors.primary.main};
+    clip-path: polygon(0 0, 100% 0%, 100% 64%, 0 90%);
+    z-index: -1;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    color: #fff;
+    font-size: ${({ theme }) => theme.typography.fontSize};
+    list-style: none;
+    margin-bottom: 8px;
+    &::before {
+      content: '–';
+      margin-right: 8px;
+    }
+  }
+`;
+
+const CardTitle = styled.h4`
+  color: #fff;
+  font-size: ${({ theme }) => theme.typography.heading3.fontSize};
+  font-weight: ${({ theme }) => theme.typography.fontWeightBold};
+  text-align: center;
+  margin-top: 0;
+`;

index.mdx

@@ -26,6 +26,8 @@ import icon3 from './images/icon3.png';
 import bookManagementIcon from './images/book-management.svg';
 import foundOrPrivate from './images/found-or-private.svg';
 
+import Card from './components/Card';
+
 export default LandingLayout;
 
 <Jumbotron>
@@ -67,6 +69,13 @@ export default LandingLayout;
         aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur
         an usu.
     </ThinTile>
+    <Card title="Freemium">
+      <ul>
+        <li>Access to all free APIs</li>
+        <li>Stuff</li>
+        <li>Things</li>
+      </ul>
+    </Card>
   </FlexSection>
   {/* <Jumbotron parallaxEffect bgImage={icon1}>
     <H1>Tutorials</H1>