> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/key-concepts/in-line-icons-global-values-and-text-presets.md).

# In-Line Icons, Global Values, and Text Presets

When you're designing cards, you often want to throw in icons, highlighted text, or make use of variables that only need to be changed in one place, were you to change your mind later. All string (text) fields can utilize in-line syntax to produce amazing results.

### Icons, Images, Shapes

Want an icon directly inside your card text — say `+1 ❤️`? Three ways to do it, picked by how often you'll reuse the icon.

#### One-off: write the image inline

If you'll only use the heart once or twice, just upload the image (or create the shape/prefab) and reference it inline using `<img=...>`:

{% code overflow="wrap" %}

```
+1 <img=heart.png>
```

{% endcode %}

The path inside `<img=...>` resolves against your image library, prefab library, and shape library. The suffix tells the system which to use:

| Path form                                        | Resolves to                     |
| ------------------------------------------------ | ------------------------------- |
| `heart.png` (or `.svg` / `.jpg` / `.webp` / ...) | A file in the image library     |
| `heart.prefab`                                   | A prefab named "heart" — forced |
| `heart.shape`                                    | A shape named "heart" — forced  |
| `heart` (no suffix)                              | Tries prefab first, then shape  |

Use the explicit suffix when you have, say, a `gold.png` file *and* a `gold` prefab and want to disambiguate. Bare names are fine otherwise.

#### Reusing the same icon: a Global Value

If the same icon recurs across cards or templates, define it once as a Global Value of type **inlineImage**:

1. Open **Global Values**
2. Create a new entry named e.g. `goldIcon`, type **inlineImage**
3. Set the default filename and sizing

Then reference it by name in any text element:

{% code overflow="wrap" %}

```
+1 <goldIcon>
```

{% endcode %}

Change the image or default size on the Global Value later and every card using `<goldIcon>` updates automatically.

### Tuning size and position

Both forms accept the same attribute syntax. Add space-separated `key=value` pairs inside the tag:

| Attribute  | Effect                                                                                   | Example             |
| ---------- | ---------------------------------------------------------------------------------------- | ------------------- |
| `w`        | Width. Defaults to pixels; add an `em` suffix to scale with the font size                | `w=24` or `w=1.2em` |
| `h`        | Height. Same units as `w`                                                                | `h=24` or `h=1.2em` |
| `x`        | Horizontal nudge in pixels (positive = right)                                            | `x=2`               |
| `y`        | Vertical nudge in pixels (positive = down)                                               | `y=-3`              |
| `baseline` | How the image aligns to the surrounding text. One of `top`, `middle`, `bottom`, `center` | `baseline=center`   |

Combine freely:

{% code overflow="wrap" %}

```
+1 <img=heart.png w=1.2em h=1.2em y=-2 baseline=center>
+1 <goldIcon w=1.5em y=4>
```

{% endcode %}

### Text Style Presets in Text

You'll often want a phrase styled differently from the rest of a card — a keyword in red bold, a callout boxed in yellow, a tooltip in italic. Define each look once as a **Text Style Preset**, then wrap inline text in `<style=...>` tags to apply it.

#### Defining a preset

1. Open **Text Style Presets** from the project sidebar.
2. Create a new preset (e.g. `Keyword`, `Callout`, `Flavor`).
3. Set whatever properties matter for that look — font, colour, decoration, optional background and border.

A single preset can control:

| Group           | What it sets                                                                   |
| --------------- | ------------------------------------------------------------------------------ |
| Font            | Family, size, color, **bold**, *italic*, \<u>underline\</u>, ~~strikethrough~~ |
| Span background | Solid color or gradient — paints behind the wrapped text only                  |
| Span border     | Solid or gradient + width, with optional rounded corners                       |
| Inner padding   | Horizontal / vertical breathing room between the text and the span's edge      |

#### Using a preset inline

Wrap the styled text in matching tags:

{% code overflow="wrap" %}

```
Take 1 <style=Keyword>damage</style>, then draw a card.
```

{% endcode %}

The preset name goes inside `<style=...>` and may include spaces:

{% code overflow="wrap" %}

```
The <style=Flavor Italic>old wizard</style> nodded slowly.
```

{% endcode %}

#### Nesting

Presets stack — an inner preset merges on top of the active style, so you can layer effects:

{% code overflow="wrap" %}

```
<style=Callout>This is important: <style=Keyword>do not lose this card</style>.</style>
```

{% endcode %}

Inside the inner `<style=Keyword>`, properties from `Callout` still apply unless `Keyword` overrides them. When the inner `</style>` closes, you fall back to `Callout` for the rest of the sentence.

### Mixing with inline images

`<style=...>` and `<img=...>` (or inline-image variables) compose freely:

{% code overflow="wrap" %}

```
<style=Keyword>+1 <goldIcon></style> per card in your hand.
```

{% endcode %}

The image picks up the active style's font size, so any `w=1.2em` / `h=1.2em` sizing on the image scales with the surrounding preset's font.

#### Notes

* **Tags must balance.** Every `<style=...>` needs a `</style>`. An unmatched closing tag is flagged as a parse issue rather than silently swallowed.
* **Editing a preset cascades.** Tweak the preset and every card using it updates — same idea as Global Values for colors.

### Global Values in Text

A **Global Value** is a named value you define once at the project level — a player's name, a town name, a number that appears across many cards — and reference by name from any card. Edit the value once and every card using it updates.

#### A simple example

{% code overflow="wrap" %}

```
Hi, my name is <bartenderName> and I live in <townName>. Nice to meet you!
```

{% endcode %}

If you've created Global Values named `bartenderName` (`"Greta"`) and `townName` (`"Riverford"`), the rendered text reads:

{% code overflow="wrap" %}

```
Hi, my name is Greta and I live in Riverford. Nice to meet you!
```

{% endcode %}

Change either Global Value and every card using `<bartenderName>` or `<townName>` updates automatically.

Names are case-insensitive — `<gameName>` and `<GAMENAME>` both work.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cardstock-studio.gitbook.io/docs/key-concepts/in-line-icons-global-values-and-text-presets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.