Skip to content

docs: add beta banner frontmatter property documentation #1740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

docs: add beta banner frontmatter property documentation #1740

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15fb6c0
docs: add beta banner frontmatter property documentation
devin-ai-integration[bot] Nov 4, 2025
03c5bbe
docs: update banner frontmatter property documentation
devin-ai-integration[bot] Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions fern/products/docs/pages/customization/frontmatter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,84 @@ hide-feedback: true
<img src="./on-page-feedback.png" alt="Leave feedback feature" />
</Frame>

## Banner
<ParamField path="banner" type="boolean | string | object" required={false}>
Displays a banner at the top of the page content. Can be set to `true` for a default warning banner, a string for a warning banner with custom message, or an object for full customization with different intents and colors.
</ParamField>

### Simple usage

<CodeBlock title="Default warning banner">
```mdx
---
title: New Plant Species Guide
banner: true
---
```
</CodeBlock>

<CodeBlock title="Custom message">
```mdx
---
title: Experimental Plant Care API
banner: This plant care API is experimental and may change without notice.
---
```
</CodeBlock>

### Advanced usage with intents

<CodeBlock title="Info banner">
```mdx
---
title: Plant Database Migration
banner:
message: We're migrating to a new plant database. Some features may be temporarily unavailable.
intent: info
---
```
</CodeBlock>

<CodeBlock title="Success banner">
```mdx
---
title: New Plant Identification Feature
banner:
message: Our new AI-powered plant identification feature is now available!
intent: success
---
```
</CodeBlock>

Available intents: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`

### Custom colors

<CodeBlock title="Banner with custom colors">
```mdx
---
title: Seasonal Plant Guide
banner:
message: Spring planting season has begun! Check out our seasonal recommendations.
intent: tip
color:
background: "#e8f5e9"
text: "#1b5e20"
border: "#4caf50"
---
```
</CodeBlock>

<Warning>
Custom colors may not adapt well to dark mode. Use with caution and test in both light and dark themes.
</Warning>

### Deprecated: beta property

<ParamField path="beta" type="boolean | string" required={false} default={false}>
**Deprecated.** Use `banner` instead. Displays a yellow warning banner at the top of the page to indicate that the content is in beta or still being worked on.
</ParamField>

## Page logo
<ParamField path="logo" type="object" required={false}>
Override the site-wide logo for a page. Specify different logos for light and dark modes using absolute URLs.
Expand Down