Markup lets you format and style text inside Text Layers.

It allows you to add emphasis, color, lists, icons, and data references directly within a text field.

It also works together with Macros, which can be used to insert reusable patterns or shortcuts inside markup text.

Overview #

Markup works through small text tags surrounded by angle brackets (for example, <b>, <i>, <data>, etc.).

These tags tell Cocktail Card Designer how to style or format parts of your text.

You’ll see the result of markup:

• In the Layout Canvas while editing,
• In the Layout Preview, and
• In your final printed or exported output.

Paragraphs and Line Breaks #

<p>
Starts a new paragraph block.

Use this to separate large sections of text, abilities, or descriptions.

Attributes:

• indent:
  • Adjusts how far the paragraph starts from the left side.
  • Example:
    • <p indent="15">Indented paragraph</p>
• margin:
  • Adds extra space around the paragraph (top, bottom, left, right).
  • Example:
    • <p margin="5,2,5,2">Paragraph with spacing</p>

<br>
Inserts a line break inside a paragraph.

• Example:
  • Line one<br>Line two

Text Styling #

You can use these tags to apply common text effects.

Bold #

<b> or <strong>

• Example:
  • <b>Bold text</b>

Italics #

<i> or <em>

• Example:
  • <i>Italic text</i>

Underline #

<u>

• Example:
  • <u>Underlined text</u>

Strikethrough #

<s>, <del>, or <strike>

• Example:
  • <s>Crossed text</s>

Advanced Text Styling #

The <span> tag lets you fine-tune how specific parts of your text look.

You can set the font, size, style, color, and background.

Supported attributes:

• font-family
  • Example:
    • font-family="Arial"
• font-size
  • Example:
    • font-size="16"
• font-style
  • Example:
    • font-style="Italic"
• font-weight
  • Example:
    • font-weight="Bold"
• foreground
  • Text color
  • Example:
    • foreground="#FF0000"
• background
  • Background color
  • Example:
    • background="#202020"

Example with several attributes:

<span font-family="Garamond" font-size="16" foreground="#FF0000">
  Red Garamond Text
</span>

Lists #

Lists are supported just like in documents or websites.

Unordered Lists (bulleted) #

Use <ul> to create a bulleted list.

Supported attributes:

• type
  • disc, circle, square, or none
• offset
  • Space between bullet and text
• indent
  • How far from the left edge the list starts

Example usage:

<ul type="square" indent="10">
  <li>First item</li>
  <li>Second item</li>
</ul>

Ordered Lists (numbered / lettered) #

Use <ol> for numbered or lettered lists.

Supported attributes:

• type
  • 1, a, A, i, or I
  • (number, letter, or Roman numeral)
• offset
  • Adjusts marker spacing
• indent
  • Sets left margin distance

Example usage:

<ol type="a" indent="10">
  <li>First</li>
  <li>Second</li>
</ol>

Tables #

Use <table> to display structured rows and columns.

Supported attributes:

• cellpadding
  • Adds spacing around text inside each cell

Example usage:

<table cellpadding="3">
  <tr><td>Name</td><td>Value</td></tr>
  <tr><td>Attack</td><td>7</td></tr>
</table>

Icons #

Use <icon> to insert small icons or symbols, from a file, directly into your text.

Requires the attribute:

• src
  • The file name or path to the icon image

Example usage:

<icon src="Sword.png"/>

Tip:
Icons pair perfectly with Macros. For example, you could create a macro that replaces:

[icon_Sword]

with:

<icon src="Sword.png"/>.

Data Values #

You can automatically insert text from your Data Source using <data>.

Attributes:

• col
  • The column name to pull data from
• default
  • A fallback value if that cell is empty

Example usage:

<data col="Health" default="0"/>

• This will display the value from the Health column for that card, or show 0 if it’s blank.