Anchor

The <Anchor> component creates direct links to specific content like paragraphs, tables, and code blocks. Use anchors when you need to reference non-heading content that doesn’t automatically generate its own link.

Headings automatically generate anchor links based on their text content, so you don’t need to use the anchor component for headings.

Usage

Wrap your content with the <Anchor> tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: https://website.com/page#data).

This sentence has a custom anchor named #data. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.

Markdown

1 <Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.

Variants

Anchor a table

Endpoint	Method	Description
`/plants`	GET	Retrieve all plants
`/plants/:id`	GET	Retrieve a specific plant
`/plants`	POST	Create a new plant

You can link directly to the API endpoints table.

Markdown

1 <Anchor id="api-endpoints">
2 
3 | Endpoint | Method | Description |
4 |----------|--------|-------------|
5 | `/plants` | GET | Retrieve all plants |
6 | `/plants/:id` | GET | Retrieve a specific plant |
7 | `/plants` | POST | Create a new plant |
8 
9 </Anchor>
10 
11 You can link directly to the [API endpoints table](#api-endpoints).

Anchor a code block

1 def water_plant(plant_id, amount):
2     """Water a plant with specified amount"""
3     headers = {"Authorization": f"Bearer {api_key}"}
4     return requests.post(f"https://api.example.com/plants/{plant_id}/water", 
5                         json={"amount": amount}, 
6                         headers=headers)

Reference the watering code example in your implementation.

Markdown

1 <Anchor id="example-code">
2 
3 ```python
4 def water_plant(plant_id, amount):
5     """Water a plant with specified amount"""
6     headers = {"Authorization": f"Bearer {api_key}"}
7     return requests.post(f"https://api.example.com/plants/{plant_id}/water", 
8                         json={"amount": amount}, 
9                         headers=headers)
10 ```
11 
12 </Anchor>
13 
14 Reference the [watering code example](#example-code) in your implementation.

Properties

stringRequired

The anchor ID for this content. Reference it in URLs using the hash (example: #data)

1	<Anchor id="api-endpoints">
2
3	\| Endpoint \| Method \| Description \|
4	\|----------\|--------\|-------------\|
5	\| `/plants` \| GET \| Retrieve all plants \|
6	\| `/plants/:id` \| GET \| Retrieve a specific plant \|
7	\| `/plants` \| POST \| Create a new plant \|
8
9	</Anchor>
10
11	You can link directly to the [API endpoints table](#api-endpoints).

1	def water_plant(plant_id, amount):
2	"""Water a plant with specified amount"""
3	headers = {"Authorization": f"Bearer {api_key}"}
4	return requests.post(f"https://api.example.com/plants/{plant_id}/water",
5	json={"amount": amount},
6	headers=headers)

1	<Anchor id="example-code">
2
3	```python
4	def water_plant(plant_id, amount):
5	"""Water a plant with specified amount"""
6	headers = {"Authorization": f"Bearer {api_key}"}
7	return requests.post(f"https://api.example.com/plants/{plant_id}/water",
8	json={"amount": amount},
9	headers=headers)
10	```
11
12	</Anchor>
13
14	Reference the [watering code example](#example-code) in your implementation.