# 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.
</Note>

## 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`).

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

```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

<div>
  <div>
    <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>

    <p>
      You can link directly to the 

      [API endpoints table](#api-endpoints)

      .
    </p>
  </div>
</div>

```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

<div>
  <div>
    <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.
  </div>
</div>

````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

<ParamField path="id" type="string" required={true}>
  The anchor ID for this content. Reference it in URLs using the hash (example: `#data`)
</ParamField>