Add additional properties to Cards page, restructure various component pages (Docs)

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

@@ -5,18 +5,6 @@ description: 'Expand or collapse to reveal more information'
 
 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.
 
-## Properties
-
-<ParamField path="title" type="string" required={true}>
-  The title shown in the accordion header
-</ParamField>
-
-<ParamField path="children" type="string | JSX" required={true}>
-  The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
-</ParamField>
-
-<br />
-
 <Tabs>
   <Tab title="Example">
       <Accordion title='Single Accordion'>
@@ -32,3 +20,14 @@ The Accordion component allows you to create expandable sections in your documen
   </Tab>
 </Tabs>
 
+## Properties
+
+<ParamField path="title" type="string" required={true}>
+  The title shown in the accordion header
+</ParamField>
+
+<ParamField path="children" type="string | JSX" required={true}>
+  The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
+</ParamField>
+
+

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

@@ -5,50 +5,6 @@ description: 'Highlight important information, warnings, or tips in your documen
 
 Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.
 
-## Properties
-
-Customize your Callouts using the following properties:
-
-<ParamField path="intent" type="string" required={true}>
-  The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`
-</ParamField>
-
-<ParamField path="title" type="string" required={false}>
-  The title of your Callout
-</ParamField>
-
-<ParamField path="icon" type="string | ReactElement" required={false}>
-  The icon of your Callout. Can be:
-  - A [Font Awesome](https://fontawesome.com/icons) icon name
-  - A React element
-  - If not specified, uses a default icon based on the intent:
-    - info: InfoCircle
-    - warning: Bell
-    - success: CheckCircle
-    - error: WarningTriangle
-    - note: Pin
-    - launch: Rocket
-    - tip: Star
-    - check: Check
-</ParamField>
-
-<br />
-
-<Tabs>
-<Tab title="Callout">
-<Tip title="Example Callout" icon="leaf">
-This Callout uses a title and a custom icon. 
-</Tip>
-</Tab>
-<Tab title="Markdown">
-```markdown
-<Tip title="Example Callout" icon="leaf">
-This Callout uses a title and a custom icon. 
-</Tip>
-```
-</Tab>
-</Tabs>
-
 ## Callout varieties
 
 ### Note callouts
@@ -115,3 +71,48 @@ This Callout uses a title and a custom icon.
 ```jsx
 <Check>This brings us a checked status</Check>
 ```
+
+## Properties
+
+Customize your Callouts using the following properties:
+
+<ParamField path="intent" type="string" required={true}>
+  The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`
+</ParamField>
+
+<ParamField path="title" type="string" required={false}>
+  The title of your Callout
+</ParamField>
+
+<ParamField path="icon" type="string | ReactElement" required={false}>
+  The icon of your Callout. Can be:
+  - A [Font Awesome](https://fontawesome.com/icons) icon name
+  - A React element
+  - If not specified, uses a default icon based on the intent:
+    - info: InfoCircle
+    - warning: Bell
+    - success: CheckCircle
+    - error: WarningTriangle
+    - note: Pin
+    - launch: Rocket
+    - tip: Star
+    - check: Check
+</ParamField>
+
+<br />
+
+<Tabs>
+<Tab title="Callout">
+<Tip title="Example Callout" icon="leaf">
+This Callout uses a title and a custom icon. 
+</Tip>
+</Tab>
+<Tab title="Markdown">
+```markdown
+<Tip title="Example Callout" icon="leaf">
+This Callout uses a title and a custom icon. 
+</Tip>
+```
+</Tab>
+</Tabs>
+

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

@@ -5,13 +5,6 @@ description: 'Show cards side by side in a grid format'
 
 The `CardGroup` component lets you organize multiple `Card` components in a responsive grid layout.
 
-## Properties
-
-<ParamField path="cols" type="number" required={false} default="2">
-  The number of columns to display in the grid
-</ParamField>
-
-<br />
 <Tabs>
   <Tab title="Example">
     <CardGroup cols={2}>
@@ -48,3 +41,9 @@ The `CardGroup` component lets you organize multiple `Card` components in a resp
     ```
   </Tab>
 </Tabs>
+
+## Properties
+
+<ParamField path="cols" type="number" required={false} default="2">
+  The number of columns to display in the grid
+</ParamField>

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

@@ -5,78 +5,96 @@ description: 'Use cards to display content in a box'
 
 Cards are container components that group related content and actions together. They provide a flexible way to present information with optional elements like icons, titles, and links in a visually distinct box.
 
-## Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `title` | `string` | The title text to display in the card |
-| `icon` | `string \| img` | Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image |
-| `href` | `string` | Optional URL that makes the entire card clickable |
-
-### Basic
 
+<Tabs>
+<Tab title="Basic card">
 <Card 
     title="Python" 
     icon="brands python" 
     href="https://github.com/fern-api/fern/tree/main/generators/python"
 >
     The icon field references a Font Awesome icon.
 </Card>
+</Tab>
+<Tab title="Markdown">
+```jsx
+<Card 
+    title="Python" 
+    icon="brands python" 
+    href="https://github.com/fern-api/fern/tree/main/generators/python"
+>
+    The icon field references a Font Awesome icon.
+</Card>
+```
+</Tab>
+</Tabs>
 
-### Custom icon
-
+<Tabs>
+<Tab title="Card with custom icon">
 <Card 
     title="Python" 
     icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>} 
     href="https://github.com/fern-api/fern/tree/main/generators/python"
 >
     Pass in an image tag to use a custom icon.
 </Card>
+</Tab>
+<Tab title="Markdown">
+```jsx
+<Card 
+    title="Python" 
+    icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>} 
+    href="https://github.com/fern-api/fern/tree/main/generators/python"
+>
+    Pass in an image tag to use a custom icon.
+</Card>
+```
+</Tab>
+</Tabs>
 
-### Icon position
-
+<Tabs>
+<Tab title="Card with icon in left position">
 <Card 
     title="Location" 
     icon="regular globe" 
     iconPosition="left"
 >
-    You can set the icon position as `left` or `top`. Default is `top`.
+    You can set the icon position as `left` or `top`.
 </Card>
+</Tab>
+<Tab title="Markdown">
+```jsx
+<Card 
+    title="Location" 
+    icon="regular globe" 
+    iconPosition="left"
+>
+    You can set the icon position as `left` or `top`.
+</Card>
+```
+</Tab>
+</Tabs>
+
+## Properties
 
-<Aside>
-    <CodeBlocks>
-        <CodeBlock title="Basic">
-            ```jsx
-            <Card 
-                title="Python" 
-                icon="brands python" 
-                href="https://github.com/fern-api/fern/tree/main/generators/python"
-            >
-                View Fern's Python SDK generator.
-            </Card>
-            ```
-        </CodeBlock>
-        <CodeBlock title="Custom Icon">
-            ```jsx
-            <Card 
-                title="Python" 
-                icon={<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo"/>} 
-                href="https://github.com/fern-api/fern/tree/main/generators/python"
-            >
-                View Fern's Python SDK generator.
-            </Card>
-            ```
-        </CodeBlock>
-        <CodeBlock title="Icon Position">
-            ```jsx
-            <Card 
-                title="Location" 
-                icon="regular globe" 
-                iconPosition="left"
-            >
-                You can set the icon position as `left` or `top`. Default is `top`.
-            </Card>
-            ```
-        </CodeBlock>
-    </CodeBlocks>
-</Aside>
+<ParamField path="title" type="string">
+  The title text to display in the card
+</ParamField>
+<ParamField path="icon" type="string | img">
+  Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image
+</ParamField>
+<ParamField path="href" type="string">
+  Optional URL that makes the entire card clickable
+</ParamField>
+<ParamField path="iconPosition" type="'top' | 'left'" default="top">
+  The position of icon relative to the text.
+</ParamField>
+<ParamField path="color" type="string">
+  Hex color value for the icon (e.g. `#FF0F00`). Ignored if `lightModeColor` and `darkModeColor` are both set
+</ParamField>
+<ParamField path="darkModeColor" type="string">
+  Hex color value for the icon in dark mode (e.g. `#FF0F00`)
+</ParamField>
+<ParamField path="lightModeColor" type="string">
+  Hex color value for the icon in light mode (e.g. `#FF0F00`)
+</ParamField>

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

@@ -5,19 +5,8 @@ description: 'Wrap images in a container with the frame component'
 
 The Frame component provides a container for images and other media with optional captions and backgrounds.
 
-## Properties
-
-<ParamField path="caption" type="string" required={false}>
-  Caption text to display below the frame
-</ParamField>
-
-<ParamField path="background" type="'subtle' | undefined" required={false}>
-  Adds a subtle background to the frame
-</ParamField>
-
-<br />
 <Tabs>
-  <Tab title="Example">
+  <Tab title="Basic frame">
     <Frame caption="Beautiful mountains">
       <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains"/>
     </Frame>
@@ -31,10 +20,8 @@ The Frame component provides a container for images and other media with optiona
   </Tab>
 </Tabs>
 
-## With Subtle Background
-
 <Tabs>
-  <Tab title="Example">
+  <Tab title="Frame with subtle background">
     <Frame caption="Beautiful mountains" background="subtle">
       <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="Sample photo of mountains"/>
     </Frame>
@@ -47,3 +34,14 @@ The Frame component provides a container for images and other media with optiona
     ```
   </Tab>
 </Tabs>
+
+## Properties
+
+<ParamField path="caption" type="string" required={false}>
+  Caption text to display below the frame
+</ParamField>
+
+<ParamField path="background" type="'subtle' | undefined" required={false}>
+  Adds a subtle background to the frame
+</ParamField>
+

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

@@ -5,8 +5,6 @@ description: 'Use Font Awesome icons in your documentation'
 
 Add Font Awesome icons to your docs with customizable styles, colors and sizes using the `Icon` component. All Font Awesome Pro styles are supported.
 
-## Examples 
-
 <Tabs>
   <Tab title="Example">
     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>