> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/link.md).

# Link

![](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FQ4dON25vt9FZi7WK8LBH%2Fimage.png?alt=media\&token=540cec9d-b152-4469-8a66-caeefb33b33e)

## Overview

A **Link module** can be used for adding clickable images with embedded links.

## Link Properties

**Link URL** (required)\
*String, url*\
Sets the url embedded into the Link module.

**Link Text**\
*String*\
Defines text to be added after the image. The **Link Text** will also include the embedded **Link URL**.

[**Link Description (ARIA)**](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)\
*String*\
Sets an ARIA text description for accessibility readers.

**Is Link External?**\
*Checkbox, default `disabled`*\
This property should be checked off if an external url (not hosted on lcdbackstage.com) is being linked.

### Style Properties

[**Font Size**](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\
*String*\
Sets the font size of the Link. Example: `6px` or `1em`

[**Font Family**](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\
*String - Arial*\
Sets the font for the **Link Text** to the specified [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) name or generic family name

[**Link Text Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Overrides the default color of the **Link Text**.

[**Link Text Decoration**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)\
*String, css property*\
Sets the appearance of decorative lines on the **Link Text**. This property accepts values for the following style properties: [`text-decoration-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line), [`text-decoration-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color), [`text-decoration-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style), and [`text-decoration-thickness`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness).

[**Active Style Override**](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)\
*String, css property*\
If defined, overrides the default appearance of decorative lines on the Link Text **when the Link is** [**actively being clicked**](https://developer.mozilla.org/en-US/docs/Web/CSS/:active). Accepts the same values as **Link Text Decoration**.

[**Focus Style Override**](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)\
*String, css property*\
If defined, overrides the default appearance of decorative lines on the Link Text **when the Link has entered the** [**`:focused` state**](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus); this is different from being actively clicked. Accepts the same values as **Link Text Decoration**.

[**Hover Style Override**](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)\
*String, css property*\
If defined, overrides the default appearance of decorative lines on the Link Text **when the mouse cursor is hovering over the Link**; this is different from being actively clicked. Accepts the same values as **Link Text Decoration**.<br>

## Link Image

**URL** (required)\
*String, url*\
Url of the asset image. This property accepts the url of the Link image.

[**Alt Text**](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)\
*String*\
Sets an [Accessibility reader](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) text description of the Link image.

[**Min Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)\
*String*\
Defines the minimum width of the Link image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Max Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)\
*String, default `100%`*\
Defines the maximum width of the Link image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Min Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)\
*String*\
Defines the minimum height of the Link image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Max Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)\
*String*\
Defines the maximum height of the Link image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Object Fit**](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)\
*Dropdown*\
Image setting for container resize behavior. The following options can be used:

* `contain`
* `cover`
* `fill`
* `none`
* `scale-down`