Skip to content

Commit 12a2086

Browse files
devalogdevalog
committed
add background for all examples
1 parent 8d60596 commit 12a2086

21 files changed

+357
-138
lines changed

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Accordions
2+
title: Accordion
33
description: Display expandable/collapsible options with browser search functionality
44
---
55

@@ -37,11 +37,13 @@ Within each accordion, you can embed images, videos, and other components (callo
3737

3838
### Multimedia
3939

40-
<Accordion title="Text content with multimedia">
41-
<Frame caption="Sample image">
42-
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
43-
</Frame>
44-
</Accordion>
40+
<div className="highlight-frame">
41+
<Accordion title="Text content with multimedia">
42+
<Frame caption="Sample image">
43+
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
44+
</Frame>
45+
</Accordion>
46+
</div>
4547

4648
```jsx Markdown
4749
<Accordion title="Text content with multimedia">
@@ -53,11 +55,13 @@ Within each accordion, you can embed images, videos, and other components (callo
5355

5456
### Nested components
5557

56-
<Accordion title="Nested components">
57-
<Note>
58-
Here's a callout nested in an accordion
59-
</Note>
60-
</Accordion>
58+
<div className="highlight-frame">
59+
<Accordion title="Nested components">
60+
<Note>
61+
Here's a callout nested in an accordion
62+
</Note>
63+
</Accordion>
64+
</div>
6165

6266
```jsx Markdown
6367
<Accordion title="Nested components">
@@ -69,9 +73,11 @@ Within each accordion, you can embed images, videos, and other components (callo
6973
7074
### Default open
7175
72-
<Accordion title='Accordion open by default' defaultOpen={true}>
73-
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.
74-
</Accordion>
76+
<div className="highlight-frame">
77+
<Accordion title='Accordion open by default' defaultOpen={true}>
78+
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.
79+
</Accordion>
80+
</div>
7581
7682
```jsx Markdown
7783
<Accordion title='Accordion open by default' defaultOpen={true}>

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

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Anchors
2+
title: Anchor
33
description: Create linkable anchors for paragraphs, tables, and other content without headings
44
---
55

@@ -25,17 +25,19 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
2525

2626
### Anchor a table
2727

28-
<Anchor id="api-endpoints">
28+
<div className="highlight-frame">
29+
<Anchor id="api-endpoints">
2930

30-
| Endpoint | Method | Description |
31-
|----------|--------|-------------|
32-
| `/plants` | GET | Retrieve all plants |
33-
| `/plants/:id` | GET | Retrieve a specific plant |
34-
| `/plants` | POST | Create a new plant |
31+
| Endpoint | Method | Description |
32+
|----------|--------|-------------|
33+
| `/plants` | GET | Retrieve all plants |
34+
| `/plants/:id` | GET | Retrieve a specific plant |
35+
| `/plants` | POST | Create a new plant |
3536

36-
</Anchor>
37+
</Anchor>
3738

3839
You can link directly to the [API endpoints table](#api-endpoints).
40+
</div>
3941

4042
```jsx Markdown
4143
<Anchor id="api-endpoints">
@@ -53,20 +55,20 @@ You can link directly to the [API endpoints table](#api-endpoints).
5355

5456
### Anchor a code block
5557

56-
<Anchor id="example-code">
57-
58-
```python
59-
def water_plant(plant_id, amount):
60-
"""Water a plant with specified amount"""
61-
headers = {"Authorization": f"Bearer {api_key}"}
62-
return requests.post(f"https://api.example.com/plants/{plant_id}/water",
63-
json={"amount": amount},
64-
headers=headers)
65-
```
66-
67-
</Anchor>
68-
58+
<div className="highlight-frame">
59+
<Anchor id="example-code">
60+
61+
```python
62+
def water_plant(plant_id, amount):
63+
"""Water a plant with specified amount"""
64+
headers = {"Authorization": f"Bearer {api_key}"}
65+
return requests.post(f"https://api.example.com/plants/{plant_id}/water",
66+
json={"amount": amount},
67+
headers=headers)
68+
```
6969
Reference the [watering code example](#example-code) in your implementation.
70+
</Anchor>
71+
</div>
7072

7173
````jsx Markdown
7274
<Anchor id="example-code">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: 'Asides'
2+
title: 'Aside'
33
description: 'Push any content inside the Aside component to the right of the page in a sticky container'
44
---
55

66
The `<Aside>` component creates a sticky container that floats content to the right of your page. Use it to showcase code examples, API snippets, or any supplementary content that should stay visible as users scroll.
77

8+
## Usage
9+
810
<Aside>
911
<EndpointRequestSnippet endpoint='POST /chat/{domain}' />
1012
</Aside>
1113

12-
## Usage
13-
1414
```jsx Markdown
1515
<Aside>
1616
<EndpointRequestSnippet endpoint='POST /chat/{domain}' />

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Badges
2+
title: Badge
33
description: Display small labels for status, versions, and metadata inline with your content.
44
---
55

@@ -19,14 +19,16 @@ Use the `<Badge>` component to display small pieces of information, such as stat
1919

2020
### Intents
2121

22-
<Badge intent="success">Success</Badge>
23-
<Badge intent="note">Note</Badge>
24-
<Badge intent="tip">Tip</Badge>
25-
<Badge intent="warning">Warning</Badge>
26-
<Badge intent="error">Error</Badge>
27-
<Badge intent="info">Info</Badge>
28-
<Badge intent="launch">Launch</Badge>
29-
<Badge intent="check">Check</Badge>
22+
<div className="highlight-frame">
23+
<Badge intent="success">Success</Badge>
24+
<Badge intent="note">Note</Badge>
25+
<Badge intent="tip">Tip</Badge>
26+
<Badge intent="warning">Warning</Badge>
27+
<Badge intent="error">Error</Badge>
28+
<Badge intent="info">Info</Badge>
29+
<Badge intent="launch">Launch</Badge>
30+
<Badge intent="check">Check</Badge>
31+
</div>
3032

3133
```jsx Markdown
3234
<Badge intent="success">Success</Badge>
@@ -41,10 +43,12 @@ Use the `<Badge>` component to display small pieces of information, such as stat
4143

4244
### Styles
4345

44-
<Badge intent="success" minimal>Success badge, minimal style</Badge>
45-
<Badge intent="error" minimal>Error badge, minimal style</Badge>
46-
<Badge intent="success" outlined>Success badge, outlined style</Badge>
47-
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
46+
<div className="highlight-frame">
47+
<Badge intent="success" minimal>Success badge, minimal style</Badge>
48+
<Badge intent="error" minimal>Error badge, minimal style</Badge>
49+
<Badge intent="success" outlined>Success badge, outlined style</Badge>
50+
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
51+
</div>
4852

4953
```jsx Markdown
5054
<Badge intent="success" minimal>Success badge, minimal style</Badge>

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

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: 'Buttons'
2+
title: 'Button'
33
description: 'Interactive button component with multiple variants and intents'
44
---
55

@@ -8,14 +8,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
88
## Usage
99

1010
<div className="highlight-frame">
11-
<div className="space-y-4">
1211
<div className="space-x-2">
1312
<Button intent="primary">Primary Button</Button>
1413
<Button intent="success">Success Button</Button>
1514
<Button outlined>Outlined Button</Button>
1615
</div>
1716
</div>
18-
</div>
1917

2018
```jsx Markdown
2119
<Button intent="primary">Primary Button</Button>
@@ -27,16 +25,21 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
2725

2826
### Intents
2927

30-
<div className="space-y-4">
31-
<div className="space-x-2">
32-
<Button intent="primary">Primary button</Button>
33-
<Button intent="success">Success button</Button>
34-
<Button intent="warning">Warning button</Button>
35-
<Button intent="danger">Danger button</Button>
36-
<Button intent="none">Plain button</Button>
28+
<div className="highlight-frame">
29+
<div className="space-y-4">
30+
<div className="space-x-2">
31+
<Button intent="primary">Primary button</Button>
32+
<Button intent="success">Success button</Button>
33+
<Button intent="warning">Warning button</Button>
34+
<Button intent="danger">Danger button</Button>
35+
</div>
36+
<div className="space-x-2">
37+
<Button intent="none">Plain button</Button>
38+
</div>
3739
</div>
3840
</div>
3941

42+
4043
```jsx Markdown
4144
<Button intent="primary">Primary button</Button>
4245
<Button intent="success">Success button</Button>
@@ -46,10 +49,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
4649
```
4750
### Styles
4851

49-
<div className="space-x-2">
50-
<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
51-
<Button intent="success" minimal>Minimal</Button>
52-
<Button intent="warning" mono>Monospaced</Button>
52+
<div className="highlight-frame">
53+
<div className="space-x-2">
54+
<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
55+
<Button intent="success" minimal>Minimal</Button>
56+
<Button intent="warning" mono>Monospaced</Button>
57+
</div>
5358
</div>
5459

5560
```jsx Markdown
@@ -60,10 +65,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
6065

6166
### Sizes
6267

63-
<div className="space-x-2">
64-
<Button small>Small Button</Button>
65-
<Button>Normal Button</Button>
66-
<Button large>Large Button</Button>
68+
<div className="highlight-frame">
69+
<div className="space-x-2">
70+
<Button small>Small Button</Button>
71+
<Button>Normal Button</Button>
72+
<Button large>Large Button</Button>
73+
</div>
6774
</div>
6875

6976
```jsx Markdown
@@ -74,10 +81,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
7481

7582
### With icons
7683

77-
<div className="space-x-2">
78-
<Button icon="download">Download</Button>
79-
<Button rightIcon="arrow-right">Continue</Button>
80-
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
84+
<div className="highlight-frame">
85+
<div className="space-x-2">
86+
<Button icon="download">Download</Button>
87+
<Button rightIcon="arrow-right">Continue</Button>
88+
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
89+
</div>
8190
</div>
8291

8392
```jsx Markdown
@@ -88,9 +97,11 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
8897

8998
### Link and disabled states
9099

91-
<div className="space-x-2">
92-
<Button href="/learn/docs/getting-started/overview">Link Button</Button>
93-
<Button disabled>Disabled Button</Button>
100+
<div className="highlight-frame">
101+
<div className="space-x-2">
102+
<Button href="/learn/docs/getting-started/overview">Link Button</Button>
103+
<Button disabled>Disabled Button</Button>
104+
</div>
94105
</div>
95106

96107
```jsx Markdown

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: 'Callouts'
2+
title: 'Callout'
33
description: 'Highlight important information, warnings, or tips in your documentation.'
44
---
55

@@ -21,13 +21,15 @@ To display very short pieces of information like status indicators and version n
2121

2222
### Intents
2323

24+
<div className="highlight-frame">
2425
<Warning>This raises a warning to watch out for</Warning>
2526
<Success>This indicates a successful operation or positive outcome</Success>
2627
<Error>This indicates a potential error</Error>
2728
<Info>This draws attention to important information</Info>
2829
<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
2930
<Tip>This suggests a helpful tip</Tip>
3031
<Check>This shows a checked status</Check>
32+
</div>
3133

3234
```jsx Markdown
3335
<Warning>This raises a warning to watch out for</Warning>
@@ -41,9 +43,11 @@ To display very short pieces of information like status indicators and version n
4143

4244
### Custom icon
4345

46+
<div className="highlight-frame">
4447
<Warning title="Example callout" icon="skull-crossbones">
4548
This callout uses a title and a custom Font Awesome icon.
4649
</Warning>
50+
</div>
4751

4852
```jsx Markdown
4953
<Warning title="Example callout" icon="skull-crossbones">

0 commit comments

Comments
 (0)