diff --git a/.gitignore b/.gitignore
index b2d6de3..3ced74e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/logos-documentation-website-template.iml b/.idea/logos-documentation-website-template.iml
new file mode 100644
index 0000000..0c8867d
--- /dev/null
+++ b/.idea/logos-documentation-website-template.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..0b3cc62
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/logos-documentation-website-template.iml" filepath="$PROJECT_DIR$/.idea/logos-documentation-website-template.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/docs/mdx-playground.mdx b/docs/mdx-playground.mdx
new file mode 100644
index 0000000..a5be1b4
--- /dev/null
+++ b/docs/mdx-playground.mdx
@@ -0,0 +1,13 @@
+import FeatureList from '@site/src/components/mdx/FeatureList';
+import FeatureCard from '@site/src/components/mdx/FeatureCard';
+
+:::info
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+
+<FeatureList>
+    <FeatureCard title={"Feature title"} text={"Some text ..."}/>
+</FeatureList>
diff --git a/src/components/mdx/FeatureCard/FeatureCard.tsx b/src/components/mdx/FeatureCard/FeatureCard.tsx
new file mode 100644
index 0000000..31ab79a
--- /dev/null
+++ b/src/components/mdx/FeatureCard/FeatureCard.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  title: string
+  text: string
+  index?: string
+  link?: string
+  children: React.ReactNode
+}
+
+const ln = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X']
+
+export const FeatureCard = (props: TProps): JSX.Element => {
+  const { index, text, title, link } = props
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        {index && <span className={styles.latinNumber}>{ln[index]}</span>}
+        <h3>{title}</h3>
+      </div>
+      <p className={styles.cardText}>{text}</p>
+    </div>
+  )
+}
diff --git a/src/components/mdx/FeatureCard/index.tsx b/src/components/mdx/FeatureCard/index.tsx
new file mode 100644
index 0000000..426cedd
--- /dev/null
+++ b/src/components/mdx/FeatureCard/index.tsx
@@ -0,0 +1 @@
+export * from './FeatureCard'
diff --git a/src/components/mdx/FeatureCard/style.module.scss b/src/components/mdx/FeatureCard/style.module.scss
new file mode 100644
index 0000000..83d1b2f
--- /dev/null
+++ b/src/components/mdx/FeatureCard/style.module.scss
@@ -0,0 +1,8 @@
+.card {
+  .cardHeader {
+    .latinNumber {
+    }
+  }
+  .cardText {
+  }
+}
diff --git a/src/components/mdx/FeatureList/FeatureList.tsx b/src/components/mdx/FeatureList/FeatureList.tsx
new file mode 100644
index 0000000..919c0ad
--- /dev/null
+++ b/src/components/mdx/FeatureList/FeatureList.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+export const FeatureList = ({ children }: TProps): JSX.Element => {
+  return <div className={styles.FeatureList}>{children}</div>
+}
diff --git a/src/components/mdx/FeatureList/index.tsx b/src/components/mdx/FeatureList/index.tsx
new file mode 100644
index 0000000..40ca6ce
--- /dev/null
+++ b/src/components/mdx/FeatureList/index.tsx
@@ -0,0 +1 @@
+export * from './FeatureList'
diff --git a/src/components/mdx/FeatureList/style.module.scss b/src/components/mdx/FeatureList/style.module.scss
new file mode 100644
index 0000000..5aa8c94
--- /dev/null
+++ b/src/components/mdx/FeatureList/style.module.scss
@@ -0,0 +1,2 @@
+.FeatureList {
+}