Skip to content

Commit 5091933

Browse files
Update Anchor examples to use table and code block
- Replace header-wrapping example with table example - Add code block example - Both examples show practical use cases for anchoring non-heading content Co-Authored-By: Catherine Deskur <[email protected]>
1 parent 8fcb51e commit 5091933

File tree

1 file changed

+49
-18
lines changed
  • fern/products/docs/pages/component-library/default-components

1 file changed

+49
-18
lines changed

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

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,73 @@ You can link to it using `#data` in the URL.
3030
The anchor ID to assign to this content. This will be used in the URL hash (e.g., `#data`)
3131
</ParamField>
3232

33-
## Example
33+
## Examples
3434

35-
Here's a practical example of using anchors to create deep links to specific content sections:
35+
### Anchor with a table
3636

3737
<Tabs>
3838
<Tab title="Rendered">
39-
<Anchor id="installation">
40-
### Installation Steps
39+
<Anchor id="api-endpoints">
4140

42-
Follow these steps to install the package.
43-
</Anchor>
44-
45-
<Anchor id="configuration">
46-
### Configuration
41+
| Endpoint | Method | Description |
42+
|----------|--------|-------------|
43+
| `/users` | GET | Retrieve all users |
44+
| `/users/:id` | GET | Retrieve a specific user |
45+
| `/users` | POST | Create a new user |
4746

48-
Configure your settings here.
4947
</Anchor>
5048

51-
You can now link directly to [installation](#installation) or [configuration](#configuration).
49+
You can link directly to the [API endpoints table](#api-endpoints).
5250
</Tab>
5351
<Tab title="Markdown">
5452
```jsx
55-
<Anchor id="installation">
56-
### Installation Steps
53+
<Anchor id="api-endpoints">
54+
55+
| Endpoint | Method | Description |
56+
|----------|--------|-------------|
57+
| `/users` | GET | Retrieve all users |
58+
| `/users/:id` | GET | Retrieve a specific user |
59+
| `/users` | POST | Create a new user |
5760

58-
Follow these steps to install the package.
5961
</Anchor>
6062

61-
<Anchor id="configuration">
62-
### Configuration
63+
You can link directly to the [API endpoints table](#api-endpoints).
64+
```
65+
</Tab>
66+
</Tabs>
67+
68+
### Anchor with a code block
69+
70+
<Tabs>
71+
<Tab title="Rendered">
72+
<Anchor id="example-code">
73+
74+
```python
75+
def authenticate(api_key):
76+
"""Authenticate using your API key"""
77+
headers = {"Authorization": f"Bearer {api_key}"}
78+
return requests.get("https://api.example.com/auth", headers=headers)
79+
```
6380

64-
Configure your settings here.
6581
</Anchor>
6682

67-
You can now link directly to [installation](#installation) or [configuration](#configuration).
83+
Reference the [authentication code example](#example-code) in your implementation.
84+
</Tab>
85+
<Tab title="Markdown">
86+
````jsx
87+
<Anchor id="example-code">
88+
89+
```python
90+
def authenticate(api_key):
91+
"""Authenticate using your API key"""
92+
headers = {"Authorization": f"Bearer {api_key}"}
93+
return requests.get("https://api.example.com/auth", headers=headers)
6894
```
95+
96+
</Anchor>
97+
98+
Reference the [authentication code example](#example-code) in your implementation.
99+
````
69100
</Tab>
70101
</Tabs>
71102

0 commit comments

Comments
 (0)