diff --git a/fern/products/docs/pages/component-library/default-components/accordions.mdx b/fern/products/docs/pages/component-library/default-components/accordions.mdx index 6ba3278b4..f4e58e416 100644 --- a/fern/products/docs/pages/component-library/default-components/accordions.mdx +++ b/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 - - - The title shown in the accordion header - - - - The content to be displayed when the accordion is expanded. Can include text, markdown, and components. - - -
- @@ -32,3 +20,14 @@ The Accordion component allows you to create expandable sections in your documen +## Properties + + + The title shown in the accordion header + + + + The content to be displayed when the accordion is expanded. Can include text, markdown, and components. + + + diff --git a/fern/products/docs/pages/component-library/default-components/callouts.mdx b/fern/products/docs/pages/component-library/default-components/callouts.mdx index 26bf2360f..a59399d23 100644 --- a/fern/products/docs/pages/component-library/default-components/callouts.mdx +++ b/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: - - - The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check` - - - - The title of your Callout - - - - 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 - - -
- - - - -This Callout uses a title and a custom icon. - - - -```markdown - -This Callout uses a title and a custom icon. - -``` - - - ## Callout varieties ### Note callouts @@ -115,3 +71,48 @@ This Callout uses a title and a custom icon. ```jsx This brings us a checked status ``` + +## Properties + +Customize your Callouts using the following properties: + + + The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check` + + + + The title of your Callout + + + + 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 + + +
+ + + + +This Callout uses a title and a custom icon. + + + +```markdown + +This Callout uses a title and a custom icon. + +``` + + + diff --git a/fern/products/docs/pages/component-library/default-components/card-groups.mdx b/fern/products/docs/pages/component-library/default-components/card-groups.mdx index bed9214be..2b4252a02 100644 --- a/fern/products/docs/pages/component-library/default-components/card-groups.mdx +++ b/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 - - - The number of columns to display in the grid - - -
@@ -48,3 +41,9 @@ The `CardGroup` component lets you organize multiple `Card` components in a resp ``` + +## Properties + + + The number of columns to display in the grid + diff --git a/fern/products/docs/pages/component-library/default-components/cards.mdx b/fern/products/docs/pages/component-library/default-components/cards.mdx index 1ec55c072..7ae739fd3 100644 --- a/fern/products/docs/pages/component-library/default-components/cards.mdx +++ b/fern/products/docs/pages/component-library/default-components/cards.mdx @@ -5,16 +5,9 @@ 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 + + The icon field references a Font Awesome icon. + + +```jsx + + The icon field references a Font Awesome icon. + +``` + + -### Custom icon - + + } @@ -32,51 +38,63 @@ Cards are container components that group related content and actions together. > Pass in an image tag to use a custom icon. + + +```jsx +} + href="https://github.com/fern-api/fern/tree/main/generators/python" +> + Pass in an image tag to use a custom icon. + +``` + + -### Icon position - + + - You can set the icon position as `left` or `top`. Default is `top`. + You can set the icon position as `left` or `top`. + + +```jsx + + You can set the icon position as `left` or `top`. + +``` + + + +## Properties - + + The title text to display in the card + + + Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image + + + Optional URL that makes the entire card clickable + + + The position of icon relative to the text. + + + Hex color value for the icon (e.g. `#FF0F00`). Ignored if `lightModeColor` and `darkModeColor` are both set + + + Hex color value for the icon in dark mode (e.g. `#FF0F00`) + + + Hex color value for the icon in light mode (e.g. `#FF0F00`) + diff --git a/fern/products/docs/pages/component-library/default-components/frames.mdx b/fern/products/docs/pages/component-library/default-components/frames.mdx index 05f43c5fb..ea12d459d 100644 --- a/fern/products/docs/pages/component-library/default-components/frames.mdx +++ b/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 - - - Caption text to display below the frame - - - - Adds a subtle background to the frame - - -
- + Sample photo of mountains @@ -31,10 +20,8 @@ The Frame component provides a container for images and other media with optiona -## With Subtle Background - - + Sample photo of mountains @@ -47,3 +34,14 @@ The Frame component provides a container for images and other media with optiona ``` + +## Properties + + + Caption text to display below the frame + + + + Adds a subtle background to the frame + + diff --git a/fern/products/docs/pages/component-library/default-components/icons.mdx b/fern/products/docs/pages/component-library/default-components/icons.mdx index 260dcd472..95c07f753 100644 --- a/fern/products/docs/pages/component-library/default-components/icons.mdx +++ b/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 -
diff --git a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx index 6c90fd9f1..6117582b0 100644 --- a/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx +++ b/fern/products/docs/pages/component-library/default-components/parameter-fields.mdx @@ -3,7 +3,47 @@ title: 'Parameters' description: 'Display API parameter information with metadata like type, requirements, and descriptions' --- -The `ParamField` component helps document API parameters and properties with consistent formatting. It displays the parameter name, type, requirements, and description in a structured layout. +The `ParamField` component documents API parameters and properties with consistent formatting. It displays the parameter name, type, requirements, and description in a structured layout. + + + + + + The user's display name + + + + Maximum number of items to return + + + + Use OAuth authentication instead + + + + The current status of the user account + + + + ```jsx + + The user's display name + + + + Maximum number of items to return + + + + Use OAuth authentication instead + + + + The current status of the user account + + ``` + + ## Properties @@ -24,39 +64,5 @@ The `ParamField` component helps document API parameters and properties with con - Marks the parameter as deprecated. Shows a "Deprecated" warning when true. + Marks the parameter as deprecated. - - diff --git a/fern/products/docs/pages/component-library/default-components/steps.mdx b/fern/products/docs/pages/component-library/default-components/steps.mdx index a63dd0f41..a07f52bf3 100644 --- a/fern/products/docs/pages/component-library/default-components/steps.mdx +++ b/fern/products/docs/pages/component-library/default-components/steps.mdx @@ -3,7 +3,7 @@ title: 'Steps' description: 'Display a sequence of instructions or tasks with automatic numbering and anchor links.' --- -The Steps component helps organize sequential content with automatic numbering, anchor links, and copy-to-clipboard functionality. It's ideal for tutorials, walkthroughs, or any content that needs to be followed in order. +The Steps component helps organize sequential content with automatic numbering, anchor links, and clickable step numbers that copy direct URLs to that step with visual feedback. Hover interactions reveal helpful link icons, making it ideal for tutorials, walkthroughs, or any content that needs to be followed in order. @@ -27,15 +27,15 @@ The Steps component helps organize sequential content with automatic numbering, - + Initial instructions. - + More instructions. - + Final Instructions @@ -43,15 +43,15 @@ The Steps component helps organize sequential content with automatic numbering, ```jsx - + Initial instructions. - + More instructions. - + Final Instructions @@ -73,12 +73,3 @@ The Steps component helps organize sequential content with automatic numbering, Optional title for the step -
- -## Features - -- Each step is automatically numbered in sequence -- Clicking the step number copies a direct URL to that step -- Hovering over a step's title or number reveals a link icon -- Visual feedback when step URL is copied -- Steps can be added to the table of contents