> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Anchor

> Create linkable anchors for paragraphs, tables, and other content without headings

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.

> **Note**
>
> 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](https://buildwithfern.com/learn/docs/writing-content/components/anchor#data).

**`Markdown`**

```jsx Markdown
<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](#api-endpoints).

**`Markdown`**

```jsx Markdown
<Anchor id="api-endpoints">

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

</Anchor>

You can link directly to the [API endpoints table](#api-endpoints).
```

### Anchor a code block

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

Reference the [watering code example](#example-code) in your implementation.

**`Markdown`**

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

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

</Anchor>

Reference the [watering code example](#example-code) in your implementation.
````

## Properties

**`id`** `string` — required

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

---

> Create linkable anchors for paragraphs, tables, and other content without headings