[Style Guide] Component Overview revamp

Author: ToriLindsay

src/assets/images/style-guide/ui-elements/dashbutton-example.png

@@ -3,40 +3,57 @@ title: Components
 sidebar:
     order: 2
 ---
+import { Details } from "~/components";
 
-All of the components available to contributors writing content on Cloudflare's developer documentation
-are documented in this section.
+In addition to using basic Markdown, you can use our custom components to add additional formatting to the Cloudflare Docs, such as buttons, tabs, and collapsible sections.
 
-## What is a component?
+This page shows you the basics of importing and adding a component to a page. Refer to each component page in this Style Guide to learn the specific the specific props and requirements for each.
 
-[Astro components](https://docs.astro.build/en/basics/astro-components/) are re-usable HTML templates which
-we use to reduce maintenance burden & duplicated code by returning frequently used layouts or snippets into
-a component that can be imported and used across various pages.
+Our components are based on [Astro components](https://docs.astro.build/en/basics/astro-components/).
 
-## Using components
+[Learn more about the Cloudflare Docs framework.](https://developers.cloudflare.com/style-guide/how-we-docs/our-site/#site-framework)
 
-Content is authored in [MDX](https://docs.astro.build/en/guides/markdown-content/), which allows JavaScript
-expressions and components to be used. They are like HTML elements, which can be self-closing.
+## Add a component to a page
 
-```mdx live
-import { Details, RuleID } from "~/components"
+To add a component to a page, you need to import it to the page and then add it:
 
-{/* Self-closing component */}
-<RuleID id="abcdefghijklmnopqrstuvwxyz" />
+1. Import the component to the page by adding this Markdown directly below the [frontmatter](/style-guide/frontmatter/):
 
-<br/> {/* Line break to separate rendered components */}
+   ```mdx
+   import { COMPONENT_NAME } from "~/components";
+   ```
 
-{/* Component with inside content */}
-<Details header="Open me!">
-    Hello, world!
-</Details>
-```
+   For example, if you were to add [the `DashButton` component](https://developers.cloudflare.com/style-guide/components/dash-button/) to the [Images getting started page](https://developers.cloudflare.com/images/get-started/), here is how the top of the Markdown of that page would look:
 
-### Importing
+   ```mdx
+   ---
+   pcx_content_type: get-started
+   title: Getting started
+   sidebar:
+     order: 2
 
-Components need to be imported to be made available inside a MDX file. All of our components are exported from
-`"~/components"`, so they would be imported like this:
+   ---
 
-```mdx
-import { Card, Render } from "~/components"
-```
+   import { DashButton } from "~/components";
+   ```
+
+2. Add the component to the page by adding this Markdown wherever on the page you want the component to appear:
+
+   ```mdx
+	 <COMPONENT_NAME PROP_NAME="PROP_VALUE" />
+   ```
+
+   For example, if you were to add the `DashButton` component to some steps in the [Images getting started page](https://developers.cloudflare.com/images/get-started/), here is how the Markdown would look:
+
+	 ```mdx
+   1. In the Cloudflare dashboard, go to the **Transformations** page.
+
+      <DashButton url="/?to=/:account/images/delivery-zones" />
+
+   2. Go to the specific zone where you want to enable transformations.
+   ```
+  <Details header="This is how this example would display after it is published:">
+  ![DashButton component example](~/assets/images/style-guide/ui-elements/dashbutton-example.png)
+  </Details>
+
+	 Each component has its own specific props and requirements, explained in each component page in this Style Guide.