diff --git a/src/components/Flex.astro b/src/components/Flex.astro
new file mode 100644
index 00000000000000..ba0b5ad2c706b0
--- /dev/null
+++ b/src/components/Flex.astro
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 88ff2baf89c120..457ab88c88bb50 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,6 +15,7 @@ export { default as Example } from "./Example.astro";
export { default as ExternalResources } from "./ExternalResources.astro";
export { default as Feature } from "./Feature.astro";
export { default as FeatureTable } from "./FeatureTable.astro";
+export { default as Flex } from "./Flex.astro";
export { default as Glossary } from "./Glossary.astro";
export { default as GlossaryDefinition } from "./GlossaryDefinition.astro";
export { default as GlossaryTooltip } from "./GlossaryTooltip.astro";
diff --git a/src/content/docs/style-guide/components/flex.mdx b/src/content/docs/style-guide/components/flex.mdx
new file mode 100644
index 00000000000000..418ce06ecca7e7
--- /dev/null
+++ b/src/content/docs/style-guide/components/flex.mdx
@@ -0,0 +1,37 @@
+---
+title: Flex container
+---
+
+The `` component is intended for showing multiple images in a responsive layout.
+
+A row layout is used on medium-large viewports (i.e laptops or desktops), and a column on small viewports (i.e mobile devices).
+
+## Import
+
+```mdx
+import { Flex } from "~/components";
+```
+
+## Example
+
+```mdx live
+import { Flex } from "~/components";
+
+{/* Make sure there is a newline between images, or Markdown groups them inside one element. */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file