Writing contentComponents

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

EndpointMethodDescription
/plantsGETRetrieve all plants
/plants/:idGETRetrieve a specific plant
/plantsPOSTCreate 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
11You can link directly to the [API endpoints table](#api-endpoints).

Anchor a code block

1def 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
4def 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
14Reference the [watering code example](#example-code) in your implementation.

Properties

id
stringRequired

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