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

@@ -35,75 +35,81 @@ navigation:
           - page: Overview
             path: ./pages/component-library/default-components/overview.mdx
             icon: fa-duotone fa-book
-          - page: Accordions
+          - page: Accordion
             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
+            slug: accordions
           - page: Anchor
             path: ./pages/component-library/default-components/anchor.mdx
             icon: fa-duotone fa-link
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots
-          - page: Badges
+          - page: Badge
             path: ./pages/component-library/default-components/badges.mdx
             icon: fa-regular fa-ribbon
+            slug: badges
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
             icon: fa-duotone fa-arrow-pointer
-          - page: Callouts
+          - page: Callout
             path: ./pages/component-library/default-components/callouts.mdx
             icon: fa-duotone fa-exclamation-triangle
-          - page: Cards
+            slug: callouts
+          - page: Card
             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
+            slug: cards
+          - page: Code block
             path: ./pages/component-library/default-components/code-blocks.mdx
             icon: fa-duotone fa-code
+            slug: code-blocks
           - page: Embed
             path: ./pages/component-library/default-components/embed.mdx
             icon: fa-duotone fa-window-restore
-          - page: Endpoint Request Snippet
+          - page: Endpoint request snippet
             path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
             icon: fa-duotone fa-arrow-up
             slug: request-snippet
-          - page: Endpoint Response Snippet
+          - page: Endpoint response snippet
             path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
             icon: fa-duotone fa-arrow-down
             slug: response-snippet
-          - page: Endpoint Schema Snippet
+          - page: Endpoint schema snippet
             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
+          - page: Frame
             path: ./pages/component-library/default-components/frames.mdx
             icon: fa-duotone fa-window-maximize
-          - page: Icons
+            slug: frames
+          - page: Icon
             path: ./pages/component-library/default-components/icons.mdx
             icon: fa-duotone fa-icons
-          - page: Parameter Fields
+            slug: icons
+          - page: Parameter field
             path: ./pages/component-library/default-components/parameter-fields.mdx
             icon: fa-duotone fa-list
-          - page: Steps
+            slug: parameter-fields
+          - page: Runnable endpoint
+            path: ./pages/component-library/default-components/runnable-endpoint.mdx
+            icon: fa-duotone fa-play-circle
+          - page: Step
             path: ./pages/component-library/default-components/steps.mdx
             icon: fa-duotone fa-list-ol
-          - page: Sticky tables
+            slug: steps
+          - page: Sticky table
             path: ./pages/component-library/default-components/sticky-tables.mdx
             icon: fa-duotone fa-table
-          - page: Tabs
+            slug: sticky-tables
+          - page: Tab
             path: ./pages/component-library/default-components/tabs.mdx
             icon: fa-duotone fa-folder-open
-          - page: Tooltips
+            slug: tabs
+          - page: Tooltip
             path: ./pages/component-library/default-components/tooltips.mdx
             icon: fa-duotone fa-comment
+            slug: tooltips
       - page: Fern Editor
         path: ./pages/component-library/writing-content/visual-editor.mdx
         slug: fern-editor

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.
+
+You can use single accordions or group multiple accordions together with `<AccordionGroup>`.
+
+## Usage
+
+<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>
+
+```jsx Markdown
+<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 Markdown
+<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 Markdown
+<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 Markdown
+<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>
 
-