[Style Guide] Document using JSX in partials

src/content/docs/style-guide/components/render.mdx

@@ -89,3 +89,53 @@ your partial requires parameters to be passed, and none are passed, we can warn
 
 The way that you can access these parameters is with the `props` object, surrounded in curly braces `{}`.
 This is a [JavaScript expression within MDX](https://mdxjs.com/docs/using-mdx/#props).
+
+## Dynamic (flexible) content in partials
+
+As partials are authored in MDX, they are able to use JavaScript expressions based on the `params` passed in.
+
+```mdx
+---
+params:
+  - product
+---
+
+Generic content.
+
+{/* If `params={{ product: "Magic WAN" }}` is passed, this will result in `Content specific to Magic WAN only.` */}
+{ props.product === "Magic WAN" && <p>Content specific to Magic WAN only.</p> }
+```
+
+Within JavaScript expressions, HTML or components must be used.
+
+For example, when `params={{ path: "/foo/" }}` is provided:
+
+```mdx
+---
+params:
+  - path
+---
+
+{/* ❌ - will link to the literal string `{props.path}` */}
+[link]({props.path})
+
+{/* ✅ - will link to `/foo/` */}
+<a href={props.path}>link</a>
+```
+
+For this reason, the [`Markdown`](/style-guide/components/markdown/#example-for-variables-in-partials) component is available.
+
+```mdx
+---
+params:
+  - name
+---
+
+import { Markdown } from "~/components";
+
+{/* If `params={{ name: "Cloudflare" }}` is passed, this will result in `Hello <strong>Cloudflare</strong>` */}
+{/* If `params={{ name: "NotCloudflare" }}` is passed, this will result in `Goodbye <strong>NotCloudflare</strong>` */}
+{ name === "Cloudflare" ? <Markdown text="Hello **Cloudflare**!"> : <Markdown text={`Goodbye **${name}**!`}> }
+```
+
+More examples of using JSX are available in the [mdxjs.org documentation](https://mdxjs.com/docs/what-is-mdx/#expressions).