> 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/design/text-style-presets.md).

# Text Style Presets

<mark style="color:$success;">**Text Style Presets**</mark> allow you to easily style portions of text Layers to *<mark style="color:$success;background-color:$success;">**highlight**</mark>* text, or utilize in-line icons, including icons with text on them.

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FwYm7tuHc0bumEwwxynpb%2FScreenshot%202026-06-08%20at%205.39.07%E2%80%AFPM.png?alt=media&amp;token=8b279693-da1a-436a-8c2a-ac279778d6ac" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2F1NzHMDykMkloH7TLuoam%2FScreenshot%202026-06-08%20at%205.30.27%E2%80%AFPM.png?alt=media&amp;token=0da75c06-f683-4e3e-9341-2bc2c6493adc" alt=""><figcaption></figcaption></figure></div>

***

Click the <picture><source srcset="/files/tHncNivb99Lco7boe7H9" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FLCT2MxYxsMkIVzswezF1%2FScreenshot%202026-06-08%20at%205.46.40%E2%80%AFPM.png?alt=media&amp;token=2da9f20f-194c-4eb9-801a-ad2b1a81bb42" alt="" data-size="line"></picture> button in the top-right to create a new preset. Select it from the menu on the left.

<figure><picture><source srcset="/files/mu2sccdjxSHIBfTH2QU9" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FN7gz28VMxDgB3MTY012R%2FScreenshot%202026-06-08%20at%205.46.15%E2%80%AFPM.png?alt=media&amp;token=3ffc488b-3a3d-4da6-9be0-95a7691dde66" alt=""></picture><figcaption></figcaption></figure>

The preview is shown on both light and dark backgrounds, so you can more easily see how it may appear in your Templates.

You can name your preset, and change the preview text in the top. The name will appear in the left column, while the preview text is in the top right.

{% hint style="success" %}
Toggles which are *Off* have no effect on the Text Style Preset. When you toggle them *On*, you set the values that will override the values in the [Text Layer](/docs/design/templates-design-your-cards/layers/text-layer.md).
{% endhint %}

***

## Font

<figure><picture><source srcset="/files/zIIa05UUoUaFuu3JQxsc" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FDPm14fQ34o74lbYSFxey%2FScreenshot%202026-06-08%20at%205.50.12%E2%80%AFPM.png?alt=media&amp;token=950b3ca6-9cf6-4786-80f2-33430caf6337" alt=""></picture><figcaption></figcaption></figure>

Here you can change the styling for the font, including the family, color, and more.

***

## Background & Border

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FybcQsWkO4BejAO8TppIt%2FScreenshot%202026-06-08%20at%206.01.17%E2%80%AFPM.png?alt=media&amp;token=336f17aa-defb-40e4-a3c0-d6cba74a9092" alt="" width="354"><figcaption></figcaption></figure>

Text Style Presets can optionally provide a background and/or border to your highlighted text.

<figure><picture><source srcset="/files/WvMRkkolE51DxGJt1Fhj" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FW6KNxFKiMQnsUrindrdQ%2FScreenshot%202026-06-08%20at%206.01.13%E2%80%AFPM.png?alt=media&amp;token=7cfffa45-8b70-4d3b-9a28-9fbf3d45125d" alt=""></picture><figcaption></figcaption></figure>

***

## Background Image

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FSo1JaCxVGPbwWksHLwxQ%2FScreenshot%202026-06-08%20at%206.02.28%E2%80%AFPM.png?alt=media&amp;token=f70272da-77f9-4312-b02e-de75bff0cd4c" alt="" width="349"><figcaption></figcaption></figure>

Using a Background Image, you can add in-line icons with text on top.

<figure><picture><source srcset="/files/M7ka7VEtpZgcXgpkjnle" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FFYVp6g99NPEQxEK0oStt%2FScreenshot%202026-06-08%20at%206.02.32%E2%80%AFPM.png?alt=media&amp;token=bb35bde4-3232-468e-bb4f-ea83404fb070" alt=""></picture><figcaption></figcaption></figure>

***

## Using Text Style Presets

It's easy to use these in your [Text Layer](/docs/design/templates-design-your-cards/layers/text-layer.md)!

Each Preset gives you the syntax to use, such as `<style=GoldCoin></style>`

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2Fv8GWZeRkRl609BaPceOs%2FScreenshot%202026-06-08%20at%206.05.48%E2%80%AFPM.png?alt=media&amp;token=fcf0cbfc-04dd-404d-b9cd-390593b0dc55" alt=""><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2F8p1egnzihs9agANuORO3%2FScreenshot%202026-06-08%20at%206.05.10%E2%80%AFPM.png?alt=media&amp;token=4b564b22-3459-4e5f-b4aa-1ea274510910" alt="" width="375"><figcaption></figcaption></figure></div>

Here we use the GoldCoin preset in the Oink! Demo template.

Learn more about using styles and other powerful features in the [Key Concepts](/docs/key-concepts.md) page!

{% content-ref url="/spaces/K6BdQXak9wiY4BdSf9Rq/pages/utcbyjY7InjalPK5XpdP" %}
[In-Line Icons, Global Values, and Text Presets](/docs/key-concepts/in-line-icons-global-values-and-text-presets.md)
{% endcontent-ref %}


---

# 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/design/text-style-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.
