> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/links/popup-link.md).

# Popup link

The **Popup Link** block allows you to create a clickable element that opens a modal window (popup) or a side drawer instead of navigating to a new URL. The content inside the popup is built using nested blocks.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F5YlSQff4fA2CIgUISEeA%2Fimage.png?alt=media&amp;token=fd90a55f-4530-47a0-8df0-13a2a7ea49a0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FlNgP3r3pf3qq8NOefPIg%2Fimage.png?alt=media&amp;token=d50ca6ae-c562-49ad-87ff-066dc7633539" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                  | Description                                                                                                                                                                        |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Inherit Color Scheme** | A checkbox that, when enabled (Default), uses the color scheme from the parent section for the link element.                                                                       |
| **Colors**               | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Allows you to manually select a specific Color Scheme for the link element.</p>                              |
| **Button Type**          | <p>Defines the visual style of the clickable element:</p><ul><li>Primary (Solid button),</li><li>Outline (Bordered button)</li><li>Link (Default—simple hyperlink text).</li></ul> |
| **Text**                 | The label or text content displayed for the link/button (Default is "Learn more").Font Size                                                                                        |
| **Font Size**            | <p>Sets the size of the link text:</p><ul><li>Small</li><li>Base (Default)</li><li>Large.</li></ul>                                                                                |
| **Icon Type**            | <p>Selects the graphical element displayed next to the text:</p><ul><li>None,</li><li>Arrow (Default)</li><li>Image (Allows custom upload).</li></ul>                              |
| **Image**                | <p><em>Only visible when Icon Type is Image</em>.</p><p>Upload a custom image or logo to use as the icon.</p>                                                                      |
| **Icon Size**            | Sets the size of the icon/image element, measured in pixels (px) (Range: 0px to 50px).                                                                                             |
| **Gap**                  | Sets the horizontal space between the link text and the icon/image, measured in pixels (px) (Range: 0px to 50px).                                                                  |

## Popup style

| Setting                  | Description                                                                                                                                                                  |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Inherit Color Scheme** | A checkbox that, when enabled (Default), uses the color scheme from the parent section for the popup/drawer container.                                                       |
| **Colors**               | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Allows you to manually select a specific Color Scheme for the popup/drawer container.</p>              |
| **Popup Type**           | Defines the container style when activated: Popup (Modal window) or Drawer (Side panel).                                                                                     |
| **Popup Width**          | Sets the maximum width of the popup/drawer container, measured in pixels (px) (Range: 300px to 1600px).                                                                      |
| **Corner Radius**        | <p>Controls the rounding of the popup/drawer corners. Options include:</p><ul><li>Inherit (Default — adopts the Theme settings radius)</li><li>None</li><li>Custom</li></ul> |
| **Custom Radius**        | <p><em>Only visible when Corner Radius is Custom</em>.</p><p>Sets the custom corner radius for the popup container, measured in pixels (px) (Range: 0px to 50px).</p>        |

### Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| **Bottom** | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |