Update component docs to new format with example-first structure

.vale.ini

@@ -26,6 +26,7 @@ Microsoft.Ellipses = NO # Mostly just picks up code
 Microsoft.Dashes = NO
 Microsoft.Foreign = NO
 Microsoft.Plurals = NO
+Microsoft.Quotes = NO # Mostly just picks up code
 
 # Not relevant for Fern audience
 Microsoft.GeneralURL = NO

.vale/styles/FernStyles/Acronyms.yml

@@ -84,3 +84,8 @@ exceptions:
   - RBAC
   - SAML
   - OIDC
+  - RGB
+  - JPEG
+  - RPG
+  - MIME
+  - PNG

.vale/styles/FernStyles/Headings.yml

@@ -114,3 +114,5 @@ exceptions:
   - RBAC
   - YAML
   - fern.config.json
+  - Font Awesome
+  - Card Group

fern/assets/styles.css

@@ -1107,3 +1107,24 @@ h1, h2, h3 {
 .fern-sidebar-link[href$="changelog"] > svg {
   display: none;
 }
+
+/*** START -- HIGHLIGHTED FRAME STYLING ***/
+.highlight-frame {
+  background-color: var(--accent-a2);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.highlight-frame > *:first-child {
+  margin-top: 0;
+}
+
+.highlight-frame > *:last-child {
+  margin-bottom: 0;
+}
+
+:is(.dark) .highlight-frame {
+  background-color: var(--accent-a3);
+}
+/*** END -- HIGHLIGHTED FRAME STYLING ***/

fern/docs.yml

@@ -304,6 +304,10 @@ redirects:
     destination: /learn/docs/preview-publish/publishing-your-docs
 
   # Building and Customizing Your Docs redirects - specific cases first
+  - source: /learn/docs/writing-content/components/accordion-groups
+    destination: /learn/docs/writing-content/components/accordions
+  - source: /learn/docs/writing-content/components/card-groups
+    destination: /learn/docs/writing-content/components/cards
   - source: /learn/docs/building-and-customizing-your-docs/navigation
     destination: /learn/docs/configuration/navigation
   - source: /learn/docs/navigation/overview

fern/products/docs/docs.yml

@@ -38,9 +38,6 @@ navigation:
           - page: Accordions
             path: ./pages/component-library/default-components/accordions.mdx
             icon: fa-duotone fa-chevron-down
-          - page: Accordion Groups
-            path: ./pages/component-library/default-components/accordion-groups.mdx
-            icon: fa-duotone fa-chevrons-down
           - page: Anchor
             path: ./pages/component-library/default-components/anchor.mdx
             icon: fa-duotone fa-link
@@ -59,9 +56,6 @@ navigation:
           - page: Cards
             path: ./pages/component-library/default-components/cards.mdx
             icon: fa-duotone fa-id-card
-          - page: Card Groups
-            path: ./pages/component-library/default-components/card-groups.mdx
-            icon: fa-duotone fa-grid-2
           - page: Code Blocks
             path: ./pages/component-library/default-components/code-blocks.mdx
             icon: fa-duotone fa-code
@@ -80,9 +74,6 @@ navigation:
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
             icon: fa-duotone fa-sitemap
             slug: schema-snippet
-          - page: Runnable Endpoint
-            path: ./pages/component-library/default-components/runnable-endpoint.mdx
-            icon: fa-duotone fa-play-circle
           - page: Frames
             path: ./pages/component-library/default-components/frames.mdx
             icon: fa-duotone fa-window-maximize
@@ -92,6 +83,9 @@ navigation:
           - page: Parameter Fields
             path: ./pages/component-library/default-components/parameter-fields.mdx
             icon: fa-duotone fa-list
+          - page: Runnable Endpoint
+            path: ./pages/component-library/default-components/runnable-endpoint.mdx
+            icon: fa-duotone fa-play-circle
           - page: Steps
             path: ./pages/component-library/default-components/steps.mdx
             icon: fa-duotone fa-list-ol

fern/products/docs/pages/component-library/default-components/accordions.mdx

@@ -1,31 +1,83 @@
 ---
-title: 'Accordions'
-description: 'Expand or collapse to reveal more information'
+title: Accordions
+description: Display expandable/collapsible options with browser search functionality
 ---
 
-The Accordion component allows you to create expandable sections in your documentation. Content within accordions is searchable using browser search (cmd+f) even when collapsed. The component is optimized for SEO with server-side HTML generation, ensuring search engines can properly index all content within accordions.
-
-<Tabs>
-  <Tab title="Examples">
-      <Accordion title='Single Accordion'>
-        This is an example of an accordion component. When clicked, it expands to reveal this additional content. 
-      </Accordion>
-      <Accordion title='Accordion open by default' defaultOpen={true}>
-      You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
-    </Accordion>
-  </Tab>
-  <Tab title="Markdown">
-    ```jsx
-    <Accordion title='Single Accordion'>
-      This is an example of an accordion component. When clicked, it expands to reveal this additional content.
-    </Accordion>
-
-    <Accordion title='Accordion open by default' defaultOpen={true}>
-      You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
-    </Accordion>
-    ```
-  </Tab>
-</Tabs>
+The Accordion component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed. Use accordions for FAQs, documentation sections, settings panels, or any content where progressive disclosure improves readability.
+
+<div className="highlight-frame">
+<AccordionGroup>
+  <Accordion title="Section 1" defaultOpen={true}>
+    Content for section 1, expanded by default
+  </Accordion>
+  <Accordion title="Section 2">
+    Content for section 2
+  </Accordion>
+</AccordionGroup>
+</div>
+
+## Usage
+
+You can have single Accordions, or multiple Accordions enclosed in an Accordion Group. 
+
+```jsx Markdown syntax
+<AccordionGroup>
+  <Accordion title="Section 1" defaultOpen={true}>
+    Content for section 1, expanded by default
+  </Accordion>
+  <Accordion title="Section 2">
+    Content for section 2
+  </Accordion>
+</AccordionGroup>
+```
+
+## Variants
+
+Within each Accordion, you can embed images, videos, and other components (Callouts, Code Blocks, etc) within accordions for rich interactive content.
+
+### Multimedia
+
+<Accordion title="Text content with multimedia">
+<Frame caption="Sample image">
+  <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
+</Frame>
+</Accordion>
+
+```jsx
+<Accordion title="Text content with multimedia">
+<Frame caption="Sample image">
+  <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
+</Frame>
+</Accordion>
+```
+
+### Nested components
+
+<Accordion title="Nested components">
+<Note>
+  Here's a Callout nested in an Accordion
+</Note>
+</Accordion>
+
+```jsx
+<Accordion title="Nested components">
+<Note>
+  Here's a Callout nested in an Accordion
+</Note>
+</Accordion>
+```
+
+### Default open
+
+<Accordion title='Accordion open by default' defaultOpen={true}>
+  Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
+</Accordion>
+
+```jsx
+<Accordion title='Accordion open by default' defaultOpen={true}>
+  Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
+</Accordion>
+```
 
 ## Properties
 
@@ -41,4 +93,3 @@ The Accordion component allows you to create expandable sections in your documen
   Whether the accordion should be open when the page loads. If not specified, the accordion will be collapsed by default.
 </ParamField>
 
-