Text Element

The Text element renders a single line of text in a card layout. The content can be a static string, a data-bound value from your spreadsheet column, or a mix of both. It is the most commonly used element for displaying card names, stats, descriptions, and any other textual content.

Properties

Source

The Source property defines what text is displayed in the element. It can be a plain string literal, a data binding expression using {{ColumnName}} syntax, or a mix of both — for example "{{CardName}}: Level {{Level}}" inserts two column values into a single text string. Property references using [[PropertyName]] are also supported to compose text from other properties on the same element. When Source is empty the element renders nothing.

FontSize

FontSize sets the size of the rendered text in typographic points. It accepts a plain number or a data binding that resolves to a number, allowing font size to vary per card row. Larger values increase text height proportionally. Typical values range from 8pt (small footnotes) to 24pt (large card titles).

Color

Color accepts any CSS color value for the text fill: #RRGGBB hex codes, CSS named colors (e.g. red, darkblue), or [[ConstantName]] references to constants defined on the Root element. Using constant references allows a single change in the Root settings to update the color across every element that references it — ideal for theme colors.

Align

Align controls horizontal text alignment within the element's bounding box. Left is the default and aligns each line to the left edge. Center centers every line horizontally. Right aligns each line to the right edge. This is independent of the element's position — it only affects how text fills the width of the element box.

Style

Style sets the base font weight and style applied to all text in the element. Available values are Normal, Bold, Italic, Underline, and Strikethrough. Multiple styles can be combined with | (e.g. Bold|Italic). This sets the default style — individual words can be overridden using inline formatting.

Font

Font sets the font family used to render the text. The default is Lato. Available fonts include standard fonts (Lato, DejaVu Sans, Liberation Sans, Noto Sans, Liberation Serif, Cardo, Liberation Mono) and themed gaming fonts (Pirata One). Choose a font that matches the visual tone of your card design — serif fonts for a classic feel, sans-serif for modern cards, or themed fonts for genre-specific designs.

ParagraphSpacing

ParagraphSpacing adds extra vertical space between paragraphs (line breaks) within the same text element, measured in typographic points. A value of 0 uses the default line spacing. Increasing this value is useful when Source contains multi-line text and you want visual breathing room between logical paragraphs.

RawText

When RawText is set to true, the Source value is rendered exactly as written — no {{...}} substitution or inline formatting is performed. This is useful when the displayed text needs to contain literal double-brace characters, such as code examples or template notation displayed on a card face.

Inline formatting

Text elements support rich inline formatting within the Source value. These tags can be nested and combined.

Markdown styles

**bold text**
*italic text*
~~strikethrough~~
<br> or <br/>          // line break

Color, font, and size overrides

Override the base style for a span of text:

<color=red>danger text</color>
<color=#FF8000>custom hex</color>
<font=Pirata One>themed text</font>
<size=20>big text</size>
<size=+4>relatively bigger</size>
<size=-2>relatively smaller</size>

Inline images

Embed an image inline with text using the <img> tag. The image is sized to match the current font size and aligned to the text baseline. Both raster (PNG, JPEG) and SVG formats are supported:

<img=sword-icon.png>
<img=fire-element.svg>
<img={{IconFile}}>

SVG images render as crisp vector graphics at any font size — ideal for inline icons and symbols. Raster images can be tinted when wrapped in a <tint> tag; SVG images cannot.

Outlined text

Render text with a colored outline stroke using the <outline> tag. The first parameter is the outline (stroke) color; the optional second parameter is the fill color (defaults to the current text color):

<outline=black>outlined text</outline>
<outline=gold,white>gold-outlined white text</outline>

Tinted inline images

Wrap content in a <tint> tag to colorize inline raster images. The first parameter is the color, the second is the tint intensity (0–100):

<tint=red,80><img=icon.png></tint>

Related

• References
• Textlist element
• Constants