From d61b2831226a545cde5abe1c098ec8c9275594e5 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Thu, 10 Oct 2024 17:28:48 +0100
Subject: [PATCH] [Docs Site] Add Flex component for responsive image layouts

---
 src/components/Flex.astro                     |  3 ++
 src/components/index.ts                       |  1 +
 .../docs/style-guide/components/flex.mdx      | 37 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 src/components/Flex.astro
 create mode 100644 src/content/docs/style-guide/components/flex.mdx

diff --git a/src/components/Flex.astro b/src/components/Flex.astro
new file mode 100644
index 000000000000000..ba0b5ad2c706b0c
--- /dev/null
+++ b/src/components/Flex.astro
@@ -0,0 +1,3 @@
+<div class="flex flex-col md:flex-row justify-between gap-x-2 [&_p]:!mt-0">
+    <slot />
+</div>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 88ff2baf89c1201..457ab88c88bb506 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 000000000000000..418ce06ecca7e7c
--- /dev/null
+++ b/src/content/docs/style-guide/components/flex.mdx
@@ -0,0 +1,37 @@
+---
+title: Flex container
+---
+
+The `<Flex>` 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 <p> element. */}
+
+<Flex>
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+</Flex>
+
+<br />
+
+<Flex>
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+</Flex>
+```
\ No newline at end of file